javascript - 简单的背景更改无法正常工作

我试图了解为什么这两个功能无法正常工作。我只是想要这样，所以单击按钮1可以将背景样式更改为蓝色，而单击按钮2可以更改类名称。但是我想按照小提琴中展示的方式来做。

有人可以解释为什么这些无效吗？我今天正在从事新工作，想了解为什么它不起作用，因为我认为这是一个简单的修复程序，可能存在语法错误。谢谢你的解释

var el = document.getElementByClassName('test');

function taskOne() {
  alert('task 1 executed successfully');
  el.style.background="blue !important";
}

function taskTwo() {
  alert('task 2 executed successfully');
  el.className += " test-2";
}

.test {
  background: lightgreen;
}

.test-2 {
  background: orange !important;
}

<div class="test">content</div>
<div class="test">content 2</div>
<div class="test">content 3</div>
<div class="test">content 4</div>
<div class="test">conten4t 5</div>

<button onClick="taskOne()">Task 1</button>

<button onClick="taskTwo()">Task 2</button>

最佳答案

首先，它是getElementsByClassName而不是getElementByClassName。它返回具有该类名称的元素数组。

var elements = document.getElementsByClassName('test');

function taskOne() {
  for(let i = 0; i < elements.length; i++) {
    let el = elements[i];
    el.style.backgroundColor = "blue";
  }
}

function taskTwo() {
  for(let i = 0; i < elements.length; i++) {
    let el = elements[i];
    el.className += " test-2";
  }
}

.test {
  background: lightgreen;
}

.test-2 {
  background: orange !important;
}

<div class="test">content</div>
<div class="test">content 2</div>
<div class="test">content 3</div>
<div class="test">content 4</div>
<div class="test">content 5</div>

<button onClick="taskOne()">Task 1</button>

<button onClick="taskTwo()">Task 2</button>