Модификация 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">

сами кнопки очищаются, но информация, появившаяся при выборе кнопки, все еще видна.Как я могу сбросить страницу, чтобы информация displayText не была видна?Спасибо!

Answer 1

предлагает удалить динамически прикрепленный div#info:

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

или очистить его:

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

Answer 2

Вы можете использовать прослушиватель событий для события сброса , созданного нажатием кнопки сброса, чтобы выполнить код очистки.

Вот сокращенный пример метода:

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