全局變量不會更新onclick功能
[英]Global Variable doesn't update onclick function
問題描述
我有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);
}
3 個解決方案
解決方案1
2 2015-12-28 08:25:15
原因是在addEventListener調用之前遇到了onclick屬性，因此它首先運行，因此您首先記錄，然后更新。
使用具有全局函數的onclick處理程序被認為是不好的做法，請堅持使用addEventListener 。
解決方案2
1 2015-12-28 08:26:32
您首先調用該函數並稍后更新。 您的功能打印到控制台更新值之前 。 嘗試使用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);
}
解決方案3
0 2015-12-28 08:23:21
刪除onclick屬性事件處理程序，並在動態分配的事件處理程序中調用相同的方法
檢查這個更新的小提琴
<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>
函數中的全局變量值不會更新
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.