Question

我有2个按钮绑定了一个更新全局变量的函数。为什么我必须单击按钮两次才会更新所说的全局变量？ https://jsfiddle.net/q9akn3gz/1/

<button id="btn1" onclick="myFunc()"> 1 </button>
<button id="btn2" onclick="myFunc()"> 2 </button>

var val = 0;
document.querySelector('#btn1').addEventListener('click',function() {
    val = 200;
});
document.querySelector('#btn2').addEventListener('click',function() {
    val = 400;
});
function myFunc() {
    console.log(val);
}

Answer 1

原因是在onclick调用之前遇到addEventListener属性，因此它首先运行，因此您先记录，然后再更新。

使用具有全局功能的onclick处理程序被认为是不好的做法，请坚持addEventListener。

Answer 2

您先调用该函数并稍后更新。您的功能将打印到控制台在更新值之前。尝试使用expireAfterWrites将值更新移动到相同的函数，并使用该行之前的值操作。

console.log(val)

Answer 3

删除onclick属性事件处理程序，并在动态分配的事件处理程序中调用相同的方法

检查此更新的fiddle

<html>
<body>
<button id="btn1">
1
</button>
<button id="btn2">
2
</button>

<script>
var val = 0;
 document.querySelector('#btn1').addEventListener('click',function() {
  val = 200;
  myFunc();
 });
 document.querySelector('#btn2').addEventListener('click',function() {
  val = 400;
  myFunc();
 });
function myFunc() {

 console.log(val);
}
</script>
</body>
</html>

全局变量不会更新onclick功能

3 个答案: