修改DOM实现点击表单重置按钮清除单选框触发的提示文本

问题原因 #

你写的clearResult函数被定义在modifyDOM函数内部，属于仅能在modifyDOM内部访问的私有函数，全局作用域下找不到这个函数，所以重置按钮绑定的点击事件执行时会直接报错，功能无法生效。同时最好补充节点存在判断，避免还没生成info节点时点击重置触发报错。

修复方案 #

只需要调整JS部分的函数定义位置即可，其余代码无需改动：

1. 将clearResult函数从modifyDOM内部移出，放到全局作用域
2. 给删除逻辑加非空校验，兼容info节点未生成的场景

修改后的JS核心代码如下：

// 放在全局作用域的clearResult函数
function clearResult(){
  var infoNode = document.getElementById("info");
  // 节点存在时才执行删除
  if(infoNode !== null){
    infoNode.remove();
  }
}

// modify DOM function
function modifyDOM (radioInput) {
  console.log(radioInput.name + " + " + radioInput.value);
  var displayText = textToDisplay(radioInput.value);
  var insertionNode = document.getElementById("radioButtons");
  var infoNode = document.getElementById("info");
  if (infoNode === null) {
    console.log("infoNode does not exist yet.");
    var node = document.createElement("DIV");
    node.setAttribute("id", "info");
    node.className = "form-text infoText";
    var textnode = document.createTextNode(displayText);
    node.appendChild(textnode);
    insertionNode.appendChild(node);
  } else {
    console.log("infoNode DOES exist.");
    infoNode.innerHTML = displayText;
  }
  // 删掉原来在这里定义的clearResult函数
}

修改完成后点击重置按钮即可同步删除info提示节点。

内容的提问来源于stack exchange，提问作者StevilKenevil