Javascript 全局变量不'；t更新onclick函数_Javascript

Javascript 全局变量不'；t更新onclick函数

javascript

Javascript 全局变量不'；t更新onclick函数,javascript,Javascript,我有两个按钮与一个函数绑定，该函数将更新一个全局变量。为什么我必须点击按钮两次，然后它会更新所说的全局变量？删除onclick属性事件处理程序，并在动态分配的事件处理程序中调用相同的方法检查此更新 1. 2. var=0； document.querySelector（“#btn1”）.addEventListener（'click'，function（）{ val=200； myFunc（）； }); document.querySelector（“#btn2”）.addEventLi

我有两个按钮与一个函数绑定，该函数将更新一个全局变量。为什么我必须点击按钮两次，然后它会更新所说的全局变量？

删除

onclick

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

检查此更新


1.
2.
var=0；
document.querySelector（“#btn1”）.addEventListener（'click'，function（）{
val=200；
myFunc（）；
});
document.querySelector（“#btn2”）.addEventListener（'click'，function（）{
val=400；
myFunc（）；
});
函数myFunc（）{
控制台日志（val）；
}

删除

onclick

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

检查此更新


1.
2.
var=0；
document.querySelector（“#btn1”）.addEventListener（'click'，function（）{
val=200；
myFunc（）；
});
document.querySelector（“#btn2”）.addEventListener（'click'，function（）{
val=400；
myFunc（）；
});
函数myFunc（）{
控制台日志（val）；
}

原因是

onclick

属性是在

addEventListener

调用之前遇到的，因此它首先运行，因此您首先记录，然后更新

将onclick处理程序与全局函数一起使用被认为是不好的做法，请坚持使用

addEventListener

原因是

onclick

属性是在

addEventListener

调用之前遇到的，因此它首先运行，因此您首先记录，然后更新

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

1
2.
var val=0
函数myFunc（值）{
val=值；
console.log（值）；
}

您首先调用函数，然后再进行更新。函数在更新值之前打印到控制台。尝试使用

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

1
2.
var val=0
函数myFunc（值）{
val=值；
console.log（值）；
}

工作正常。看看这个。刚刚将js代码移动到js部分不确定问题出在哪里？您的小提琴只需单击一下即可更新变量，因为它不应将

onclick

与

addEventListener

混合使用--您无法确定调用它们的顺序。经过一些调试后，我注意到

myFunc

在

eventListener

之前被调用。人们无法确定调用函数的顺序。最好连续给他们打电话！工作正常。看看这个。刚刚将js代码移动到js部分不确定问题出在哪里？您的小提琴只需单击一下即可更新变量，因为它不应将

onclick

与

addEventListener

混合使用--您无法确定调用它们的顺序。经过一些调试后，我注意到

myFunc

在

eventListener

之前被调用。人们无法确定调用函数的顺序。最好连续给他们打电话！确切地首先运行的属性实际上取决于浏览器，但显然在OP的情况下，

onclick

属性处理程序在

addEventListener

之前运行。首先运行的实际上取决于浏览器，但显然在OP的情况下，

onclick

属性处理程序在

addEventListener

之前运行。我提出了这个概念，但我必须隐藏变量，因此无法使用

inspect元素进行编辑。谢谢顺便说一句@vistajess您的变量是全局变量。。。如果我想，我可以打开控制台并键入val=9999999
…我将使用（function（）{}）来包装我的作用域
@vistajess：正如Madara所评论的，全局变量在源代码上也是可见的。试着在控制台上键入val
，在这里输入任何答案。好的，谢谢大家的建议。这真的帮了我很大的忙：）我想出了这个概念，但我必须隐藏变量，这样它就无法使用inspect element
进行编辑。谢谢顺便说一句@vistajess您的变量是全局变量。。。如果我想，我可以打开控制台并键入val=9999999
…我将使用（function（）{}）来包装我的作用域
@vistajess：正如Madara所评论的，全局变量在源代码上也是可见的。试着在控制台上键入val，在这里输入任何答案。好的，谢谢大家的建议。这真的帮了我很大的忙：）
<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>

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