Javascript 更改任何形式元素后显示div横幅

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>

标记和样式：

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>

更新率
.updateRate{
显示：无；
顶部：0px；
位置：固定；
宽度：100%；
左：0px；
z指数：11111；
}
#速率，.updateRate{
背景#354563；
颜色：#ffffff；
光标：指针；
文本对齐：居中；
填充：10px；
}

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

---

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

---

上下文：

---

它是一个内联报价工具；填写表单元素后，将生成内联报价。我试图创建一个“横幅”，如果用户第二次调整了任何web表单元素，它会发出警告。很抱歉造成混淆。

返回节点列表（类似数组的对象），而不是单个元素。因此，它没有可使用的

onchange

属性。获取节点列表后，需要循环列表中的所有项目，并为每个项目设置事件处理程序，每次一个

另外，

.getElementsByTagName（）

只允许传入单个标记名，而不允许传入逗号分隔的列表。此外，它还返回一个“活动节点列表”，这对性能有影响，因此如果您不动态添加/删除元素，应该避免使用它，而是使用它

现在，

option

、

optgroup

和

label

元素只能通过代码进行更改，并且一开始就不会发出或接收

change

事件，因此您实际上不希望/需要节点列表中包含这些元素

有关如何使您的代码更现代、更有条理的更多评论，请参见下文：

//只获取此引用一次并将其缓存在变量中
var updateRate=document.querySelector（'.updateRate'）；
//将所有相关元素收集到节点列表中
让elements=document.querySelectorAll（“输入，选择，文本区域，字段集”）；
//将节点列表转换为数组，以便.forEach（）
//可以安全地用于在所有现代浏览器中循环
Array.prototype.slice.call（元素）.forEach（函数（元素）{
//以现代方式添加事件侦听器，而不是使用.onXyz属性
addEventListener（“更改”，函数（）{
//只需删除已应用于元素的隐藏类
//而不是使用内联样式
updateRate.classList.remove（“隐藏”）；
});
});
/*
默认情况下，这将应用于HTML中的“updaterate”元素。
在适当的时候，JavaScript可以删除它。
*/
.hidden{显示：无；}
.updateRate{
顶部：0px；
位置：固定；
宽度：100%；
左：0px；
z指数：11111；
}
#速率，.updateRate{
背景#354563；
颜色：#ffffff；
光标：指针；
文本对齐：居中；
填充：10px；
}

这就是传说
选择1
选择2
选择3
更新率
您不能以这种方式附加事件，因为
getElementsByTagName
方法接受一个标记名您可以使用方法获取元素，然后使用
foreach
循环它们，并使用
addEventListener（）
附加事件：


var fields=document.querySelectorAll（“输入、选择、文本区域、选项、opt组、字段集、标签”）；
[]forEach.call（字段、函数（el）{
el.addEventListener（'change'，showUpdateRate，false）；
});
函数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'）。值；
document.querySelector（'.quote'）。textContent=quote+“quote”；
});
.updateRate{
显示：无；
顶部：0px；
位置：固定；
宽度：100%；
左：0px；
z指数：11111；
}
#比率，
.更新{
背景#354563；
颜色：#ffffff；
光标：指针；
文本对齐：居中；
填充：10px；
}
更新率




成功
动机
工作





请添加相关的HTML。
用户已返回
-请详细描述。从哪里回来？不同的页面？另一张账单？提交表单后更改？它是一个内联报价工具；填写表单元素后，将生成内联报价。我试图创建一个“刷新按钮”，如果用户第二次调整了任何web表单元素，该按钮将发出提示。很抱歉给你带来了困惑。我最初的方法是这样的：你能详细描述一下你的更新是什么意思吗？不是所有浏览器都支持在节点列表上调用
.forEach（）
。建议先将其正式转换为数组。填写表单元素后，将生成内联引号。此引号将通过单击按钮生成？！它将显示在哪里？检查我更新的代码片段@No Spex。。。它将显示“横幅”，只要报价已经生成，用户更改输入。。。