javascript - Dom 修改以使用重置按钮清除单选按钮信息

Question

所以我制作了一个可以通过重置按钮清除的表单。在此表单上，我有四个单选按钮(该代码位于顶部)。当选择按钮时，会使用“displayText”显示信息。

<script type="text/javascript">
function textToDisplay (radioValue) {
console.log("textToDisplay + " + radioValue);
var displayText = "";
if (radioValue == "S") {
  displayText = "Shortboards are under 7 ft in length.";
}
else if (radioValue == "L") {
  displayText = "Longboards are usually between 8 and 10 ft.";
}
if (radioValue == "A") {
  displayText = "Alternative boards defy easy aesthetic description.";
}
if (radioValue == "M") {
  displayText = "Mid-Length surfboards are between 7 and 8 ft.";
}
return (displayText)
}

//DOM modification
function modifyDom(radioInput) {
console.log(radioInput.name + " + " + radioInput.value);
var displayText = textToDisplay(radioInput.value);
console.log(node);
var insertnode = document.getElementById("radioButtons");
var infonode = document.getElementById("info")
if (infonode === null) {
  console.log("infonode does not yet exist");
  var node = document.createElement("DIV");
  node.setAttribute("id", "info");
  node.className = "form-text infoText";
  var textnode = document.createTextNode(displayText);
  node.appendChild(textnode);
  console.log(node);
  insertnode.appendChild(node);
}
else {
  console.log("infonode already exists");
  infonode.innerHTML = displayText;
}
}
function checkboxesSelected (checkboxes, errorString) {
console.log("checkboxesSelected function");
var cbSelected = 0;
for (i=0; i<checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    cbSelected += 1;
  }
}
if (cbSelected < 2) {
  return (errorString);
} else {
  return "";
}
}
function validate (form) {
console.log("validate form");
var fail = "";
fail += checkboxesSelected(form.extras, "At least TWO fin setup needs 
to be selected.\n")
if (fail == "") return true
else { alert(fail); return false }
}
</script>

当我使用按钮重置页面时，

  <input type="reset" name="reset" value="Reset">

按钮本身被清除，但选择按钮时出现的信息仍然可见。如何重置页面以使显示文本信息不可见？谢谢!

Answer 1

您可以使用 reset event 的事件监听器通过点击重置按钮执行清理代码生成。

这是该技术的简化示例:

"use strict";
let myForm = document.getElementById("myForm");
let infoNode = document.getElementById("infonode");
let infoText = {
  "S": "small board's are good",
  "L": "large board's are good too"
};

myForm.addEventListener("change", function (event) {
  if(event.target.name == "size") {
    infoNode.innerHTML = infoText[ event.target.value];
  }
}, false);

myForm.addEventListener("reset", function (event) {
  infoNode.innerHTML  = "";
}, false);

<form id="myForm">
  <label> <input name="size" type="radio" value = "S"> Short</label><br>
  <label> <input name="size" type="radio" value = "L"> Long</label><br>
  <input type="reset" value="reset">
</form>
<div id="infonode"></div>