Question

为什么我的小提琴无法正常工作？

<button class="example"> Expirience </button>



var x = document.getElementsByClassName("example");

x.onClick = function() {
  console.log('Hello')
}

https://jsfiddle.net/xrkjvt57/18/

Answer 1

var x = document.getElementsByClassName("example");
console.log(x)

x[0].addEventListener("click", function(){
console.log('Hello')
});

<button class="example"> Expirience </button>

Answer 2

getElementsByClassName返回一个数组。

var x = document.getElementsByClassName("example")[0];

Answer 3

您的代码有两个问题，这是一个有效的示例，其中包含有关错误之处的注释。

var x = document.getElementsByClassName("example");

// x is an array, you need to loop over the elements in the array
for(var i =0; i < x.length; i++)
  // onClick is not how you add a click handler, use addEventListener and 'click'
  x[i].addEventListener("click", function() {
    console.log('Hello')
  });

.example {
  color: red;
}

<button class="example"> Expirience </button>

Answer 4

    var x = document.querySelector(".example");

    x.addEventListener('click', function() {
      console.log('Hello')
    });

<button class="example"> Expirience </button>

Answer 5

x是NodeList个元素，因此您必须遍历它们并分别处理每个元素。此外，事件处理程序全部为小写（onclick）。您想要：

var buttons = document.getElementsByClassName("example");

Array.prototype.forEach.call(buttons, function (button) {
	button.onclick = function() {
  	    console.log('Hello');
	}
})

<button class="example"> Expirience </button>

为什么在我的情况下document.getElementsByClassName不起作用

5 个答案: