英文:
addEventListener updates global variable with previously selected value
问题
我已经成功使用以下JS代码来设置全局变量，当下拉菜单改变时，通过addEventListener动作。
但是今天我再次用于一个新的菜单时，直到第三次更改菜单选项后，全局变量才被更新。然后，变量被更新为先前选择的菜单选项的值。
似乎事件监听器直到第三次更改菜单时才会运行，尽管调用了setTestValue()函数。
所以发生了这种情况：
| 选择的菜单值 | 存储的值 | 函数调用次数 |
|---|---|---|
| 初始值 | 默认 | 1 |
| 9 | 默认 | 2 |
| 8 | 默认 | 3 |
| 7 | 8 | 4 |
| 6 | 7 | 5 |
我想知道为什么会发生这种情况以及如何解决。谢谢。
英文:
I've been successfully using the following JS to set global variables when drop-down menus are changed, via an addEventListener action.
But when I re-used it today for a new menu, the global variable was not updated until the menu option was changed for the third time. And then, the variable was updated to the value from the previously selected menu option.
It seems the eventlistener was not running until the third time the menu is changed, despite the setTestValue() function being called.
So this is happening:
| Menu value selected | valueStored | times function called |
|---|---|---|
| Start value | Default | 1 |
| 9 | Default | 2 |
| 8 | Default | 3 |
| 7 | 8 | 4 |
| 6 | 7 | 5 |
I'd like advice on why this could be happening and a fix for it. Thanks.
<!-- test menu code -->
<select id="testMenu" onchange="setTestValue()" class="menu shadow">
<option value="9999" selected>9999</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
// test menu javascript
var selected;
var stored = "Default";
function setTestValue() {
selected = document.getElementById("testMenu");
selected.addEventListener("change", function handleChange(event) {
stored = Number(event.target.value);
});
console.log("stored is: " + stored);
console.log("stored type: " + typeof stored);
}
答案1
得分: 1
用这种方式重写你的代码：
document.getElementById("testMenu").addEventListener("change", setTestValue);
function setTestValue(event) {
stored = Number(event.target.value);
console.log("stored is: " + stored);
console.log("stored type: " + typeof stored);
}
并且完全从 HTML 中移除 onchange 属性。
如评论中所指出的，你在事件监听器中定义了另一个事件的监听器，这就是为什么你看到了奇怪的行为而不是你期望的。如果你使用 onchange，就不需要添加 addEventListener（同样的事情）。
英文:
Rewrite your code like this:
document.getElementById("testMenu").addEventListener("change", setTestValue);
function setTestValue(event) {
stored = Number(event.target.value);
console.log("stored is: " + stored);
console.log("stored type: " + typeof stored);
}
And remove the onchange attribute completely from the HTML.
As pointed out in the comments, you are defining an event listener in a listener for the event, which is why you’re seeing this strange behaviour and not what you expect. No need to addEventListener if you’re using onchange (same thing).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论