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">

按钮本身已清除，但选择按钮时出现的信息仍然可见。如何重置页面，使displayText信息不可见？谢谢！

Answer 1

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

这是该技术的简化示例：

#registerPanels()

"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);

Answer 2

建议删除动态附加的div#info：

document.getElementById("info").remove();

或将其空白：

document.getElementById("info").innerHTML = "";

Dom修改以清除带有复位按钮的单选按钮信息

2 个答案: