javascript - 简单的背景更改不起作用

Question

我想了解为什么这两个功能无法正常工作。我只想要它，以便单击按钮 1 将背景样式更改为蓝色，然后单击按钮 2 更改类名称。但我想按照 fiddle 中演示的方式来做。

有人可以解释为什么这些不起作用吗？我今天在我的新工作中，想了解为什么它不起作用，因为我相信这是一个可能存在语法错误的简单修复。感谢任何解释

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>

Answer 1

首先，是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>