添加事件侦听器不是queryselector的函数

Question

我有错误说明addeventlistener不是一个函数，但是当我删除innerhtml时似乎起作用

 var num1 = document.querySelector('.num1').innerHTML;
 var num2 = document.querySelector('.num2').innerHTML;


 num1.addEventListener('click',function num() {

    console.log('working');

})


<button class="num1">1</button>
<button class="num2">2</button>

Answer 1

innerHTML是字符串MDN

...包含描述元素所有后代的序列化 HTML代码。

如果要设置事件侦听器，则需要获取DOM节点

var num1 = document.querySelector('.num1')

Answer 2

确切地说，属性innerHTML返回html字符串内容。 如果要添加事件，则必须直接在NODE元素中进行。

 var num1 = document.querySelector('.num1'); var num2 = document.querySelector('.num2'); num1.addEventListener('click', function () { console.log('working'); console.log(num1.innerHTML); }) 

 <span class="num1">1</span> <span class="num2">3</span> 

希望对您有帮助

Answer 3

你做错了。 您不能在字符串上添加事件监听器：

更新至：

var num1 = document.querySelector('.num1');
 var num2 = document.querySelector('.num2');
 num1.addEventListener('click',function num(e) {
    //if you need the innerHTML value
    console.log(e.target.value)
    console.log('working');

})


<button class="num1">1</button>
<button class="num2">2</button>