如何解决与浏览器的后退按钮一起使用时,单选按钮上的eventListener“ change”无效
我有两个具有相同名称的单选按钮,根据所选的按钮,我想在这些按钮下方更改h1的内容。所有这些都包装在提交给随机页面的表单中。问题是,提交表单后,用户使用浏览器的后退按钮返回表单页面
-
最后选择的单选按钮已正确选择!
-
但是h1的文本未正确更新(而是显示了默认的h1文本)。
这是我的代码:
var option1 = document.querySelector("#option1");
var option2 = document.querySelector("#option2");
var heading = document.querySelector("h1");
option1.addEventListener("change",() => {
heading.innerText = "Option One is Selected";
});
option2.addEventListener("change",() => {
heading.innerText = "Option Two is Selected";
});
<form action="https://www.google.com" method="GET">
<input type="radio" id="option1" name="options">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options">
<label for="option2">Option 2</label>
<h1>Choose one of the above options</h1>
<button>Submit Form</button>
</form>
我对此的看法:
似乎使用后退按钮重新加载DOM Content时,单选按钮上的change事件未触发,因此我创建了一个要使用window.onload调用的函数,该函数查找选中的复选框并相应地更改内容的h1。此时,我的JavaScript看起来像这样:
var option1 = document.querySelector("#option1");
var option2 = document.querySelector("#option2");
var heading = document.querySelector("h1");
var handleChange = () => {
if(option1.checked){
heading.innerText = "Option One is Selected";
}else if(option2.checked){
heading.innerText = "Option Two is Selected";
}else{
alert("None is Selected");
}
}
option1.addEventListener("change",() => {
heading.innerText = "Option Two is Selected";
});
window.onload = handleChange;
然后发现 window.onload 是在加载DOM之前调用的,或者至少在浏览器知道之前选择了哪个选项之前被调用的,因为上述脚本警告:“未选择”。这使我将DOMContentLoaded evenListener添加到文档中,之后我的JavaScript看起来像:
var option1 = document.querySelector("#option1");
var option2 = document.querySelector("#option2");
var heading = document.querySelector("h1");
option1.addEventListener("change",() => {
heading.innerText = "Option Two is Selected";
});
document.addEventListener("DOMContentLoaded",() => {
if(option1.checked){
heading.innerText = "Option One is Selected";
}else if(option2.checked){
heading.innerText = "Option Two is Selected";
}else{
alert("None is Selected");
}
})
这一次,我没有发现执行过程有任何变化。最后,我也尝试使用相同的代码但没有任何侦听器:
var option1 = document.querySelector("#option1");
var option2 = document.querySelector("#option2");
var heading = document.querySelector("h1");
option1.addEventListener("change",() => {
heading.innerText = "Option Two is Selected";
});
if(option1.checked){
heading.innerText = "Option One is Selected";
}else if(option2.checked){
heading.innerText = "Option Two is Selected";
}
我还是没有运气!不想使用jQuery。.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。