javascript - 在更改任何表单元素后显示 div 横幅

Question

JS:

document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").onchange = function () {
     var updateRate = document.querySelector('.updateRate');    
     updateRate.style.display = "block";
};

标记和样式:

<div class="updateRate">Update Rate</div>

<style>
.updateRate { 
   display:none;
   top: 0px;
   position: fixed;
   width: 100%;
   left: 0px;
   z-index: 11111;
}
#rate, .updateRate { 
    background: #354563;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    padding: 10px;
}
</style>

以上是我的尝试；但在任何表单元素状态更改后横幅仍未显示。

---

更新:所以下面的两个 SO 答案似乎都是正确的；但也许我没有充分解释上下文 - 现在一旦表格开始第一次填写，就会显示“横幅”；目标是在用户返回并更新表单元素(第二次，或从初始更改它)后显示横幅。

---

上下文: 这是一个内联报价工具；填写表单元素后，将生成内联报价。我试图创建一个“横幅”，如果用户第二次调整了任何 Web 表单元素，它会询问。抱歉造成混淆。

Answer 1

您不能以这种方式附加事件，因为getElementsByTagName 方法接受一个标签名称您可以使用 querySelectorAll() 方法获取元素，然后使用 foreach 循环遍历它们并使用 addEventListener() 附加事件:

var fields = document.querySelectorAll("input, select, textarea, option, optgroup, fieldset, label");

[].forEach.call(fields, function(el) {
  el.addEventListener('change', showUpdateRate, false);
});

function showUpdateRate() {
  if (document.querySelector('.quote').textContent != "") {
    document.querySelector('.updateRate').style.display = "block";
  }
}

document.querySelector('.generate').addEventListener('click', function() {
  var quote = document.querySelector('[name="type"]:checked').value;
  document.querySelector('.quote').textContent = quote + " Quote";
});

.updateRate {
  display: none;
  top: 0px;
  position: fixed;
  width: 100%;
  left: 0px;
  z-index: 11111;
}

#rate,
.updateRate {
  background: #354563;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  padding: 10px;
}

<div class="updateRate">Update Rate</div>

<br><br><br>
<form>
  <input type="radio" name="type" value="Success">Success
  <input type="radio" name="type" value="Motivation">Motivation
  <input type="radio" name="type" value="Work">Work
  <br><br>
  <input type="button" class="generate" value="Generate">
</form>
<br>
<span class="quote"></span>