与浏览器的后退按钮一起使用时，单选按钮上的eventListener“ change”无效

编程问答 2022-06-03

问题描述

我有两个具有相同名称的单选按钮，根据所选的按钮，我想在这些按钮下方更改h1的内容。所有这些都包装在提交给随机页面的表单中。问题是，提交表单后，用户使用浏览器的后退按钮返回表单页面

  1. 最后选择的单选按钮已正确选择！

  2. 但是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 (将#修改为@）

eventseventseventshtmljavascriptonchangeonchange