javascript - 如何仅使用 javascript 更改按钮颜色 onclick？

Question

我试图使用 onclick 和 getElementsByClassName 改变按钮的颜色，并想出了这样的事情:

HTML:

<button onclick="submitButtonStyle()" type="submit" class="stylebutton"> 
Submit </button>

JS:

function submitButtonStyle() { 
document.getElementsByClassName("stylebutton").style.backgroundColor = "red"; }

如果你们给我一些提示，告诉我我的代码中缺少什么/我应该添加什么等等，我将非常感激。

Answer 1

getElementsByClassName 返回一个 HTMLCollection 因此您需要使用索引获取元素，在您的例子中是 index === 0 getElementsByClassName[0].

实际上，您不需要调用函数getElementsByClassName，将元素作为参数传递。

function submitButtonStyle(_this) {
  _this.style.backgroundColor = "red";
}

<button onclick="submitButtonStyle(this)" type="submit" class="stylebutton"> 
Submit </button>

使用事件绑定(bind)和函数 querySelectorAll 的更好方法

document.querySelectorAll('.stylebutton').forEach(function(e) {
  e.addEventListener('click', function() {
    this.style.backgroundColor = "red";
  })
});

<button type="submit" class="stylebutton"> Submit </button>