Question

我想知道为什么这个javascript不起作用：

var element = document.querySelector('#element1');
var button= document.querySelector('#button1');
button.addEventListener('click', function() {
    element.doSomething();
});

var element = document.querySelector('#element2');
var button= document.querySelector('#button2');
button.addEventListener('click', function() {
    element.doSomething();
});

这两个按钮正在对＆＃34; element2＆＃34;。

做些什么

事件监听器是否保留指向变量而不是其值的指针？

感谢您的回答

Answer 1

您可以使用匿名包装块级代码;自动执行功能。

这类似于用Java封装{ /* {{code}} */ }带有花括号的代码块。您可以拥有重复的变量，只要它们存在于自己的块中即可。

这样，变量可以是相同的。你应该真的创建一个单独的函数并传入选择器ID;特别是如果他们做同样的事情。

＆＃13;

(function() {
  HTMLDivElement.prototype.doSomething = function () { 
    this.innerHTML = this.innerHTML == 'Hello' ? 'Goodbye' : 'Hello';
  }
}());

(function() {
  var element = document.querySelector('#element1');
  var button = document.querySelector('#button1');
  button.addEventListener('click', function() {
    element.doSomething();
  });
}());

(function() {
  var element = document.querySelector('#element2');
  var button = document.querySelector('#button2');
  button.addEventListener('click', function() {
    element.doSomething();
  });
}());

＆＃13;

div {
  display: inline-block;
  width: 5em;
  height: 2em;
  border: thin solid black;
  text-align: center;
  line-height: 2em;
  margin-bottom: 0.25em;
}

＆＃13;

<div id="element1">?</div>
<input type="button" id="button1" value="Button 1" />
<br />
<div id="element2">?</div>
<input type="button" id="button2" value="Button 2" />

＆＃13;

你应该试试这个。

function addButtonClick(btnSelectorId, elSelectorId) {
  document.querySelector(btnSelectorId).addEventListener('click', function() {
    document.querySelector(elSelectorId).doSomething();
  });
}

addButtonClick('#button1', '#element1');
addButtonClick('#button2', '#element2');

Answer 2

试试这个，你给这两个元素赋予了同样的名字。覆盖前一个按钮：

var element1 = document.querySelector('#element1');
var button1= document.querySelector('#button1');
button1.addEventListener('click', function() {
    element1.doSomething();
});

var element2 = document.querySelector('#element2');
var button2 = document.querySelector('#button2');
button2.addEventListener('click', function() {
    element2.doSomething();
});

Answer 3

问题是您在事件处理函数中引用了<{1}}变量。为elment分配新值时，会更改其值，这会影响两个处理程序。

解决方案：为每个使用不同的变量名称：

elment

或者更好的是，或许，完全取消闭包变量并根据需要进行查询：

var element1 = document.querySelector('#element1');
var button = document.querySelector('#button1');
button.addEventListener('click', function() {
    element1.doSomething();
});

var element2 = document.querySelector('#element2');
var button = document.querySelector('#button2');
button.addEventListener('click', function() {
    element2.doSomething();
});

Answer 4

对两个元素使用相同的变量，因此最后声明的变量是将要使用的变量。
例如：

x = "Hello";
x = "World";
console.log(x); //This will print out "World"

您需要将它们声明为不同的变量。您的代码示例（注意我更改了第二个元素）：

var elment = document.querySelector('#element1');
var button= document.querySelector('#button1');
button.addEventListener('click', function() {
    elment.doSomething();
});

var elment2 = document.querySelector('#element2'); //Changed to elment2
var button2 = document.querySelector('#button2'); //Changed to button2
button2.addEventListener('click', function() {
    elment2.doSomething();
});

事件监听器设置错误的元素

4 个答案: