代码之家 › 专栏 › 技术社区 › MountainConqueror

为什么document.getelementsbyclassname在我的情况下不起作用[重复]

html javascript

-1

MountainConqueror · 技术社区 · 8 年前

为什么我的小提琴没有按预期工作?

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



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

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

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

5 回复 | 直到 8 年前

Emeeus 8 年前

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

x[0].addEventListener("click", function(){
console.log('Hello')
});

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

user10025500user10025500 8 年前

getelementsbyclassname返回数组。

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

Adam H 8 年前

您的代码有几个问题,下面是一个工作示例,其中有关于错误的注释。

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>

Aankhen Jon 8 年前

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>

zanmato 8 年前

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

    x.addEventListener('click', function() {
      console.log('Hello')
    });

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前