全局变量不会更新onclick函数

我有2个按钮绑定一个函数，将更新全局变量。为什么我必须点击按钮两次，然后它会更新所说的全局变量？ https://jsfiddle.net/q9akn3gz/1/全局变量不会更新onclick函数

<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); 
}

来源

2015-12-28 vistajess

其工作正常。检查此[小提琴]（https://jsfiddle.net/q9akn3gz/2/）。只是将js代码移动到JS部分 – Rajesh

不确定问题是什么，你的小提琴只需点击一下即可更新变量 – Ramanlfc

不要将'onclick'与'addEventListener'混合在一起 - 你不能确定它们的顺序会被调用。 – Barmar

除去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>

来源

2015-12-28 08:23:21 gurvinder372

为什么downvote？ – gurvinder372

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

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

来源

2015-12-28 08:25:15

准确。首先运行的实际上是依赖于浏览器的，但显然在OP的情况下，'onclick'属性处理程序在'addEventListener'之前运行。 –

您正在调用函数并稍后更新。您的功能打印到控制台之前更新值。尝试使用console.log(val)将值更新移到相同的函数，并使用该行之前的值操作。

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

var val = 0 
function myFunc(value) { 
    val = value; 
    console.log(value); 
}

来源

2015-12-28 08:26:32

我想出了这个概念，但我必须隐藏这个变量，所以它不能使用'inspect元素'编辑。谢谢btw。 – vistajess

@vistajess你的变量是全局的...如果我想，我可以弹出打开控制台并键入'val = 99999999' ... –

我只是用'（function（）{}）（） ;' – vistajess

全局变量不会更新onclick函数

回答

相关问题