javascript - 当被不同的按钮调用时，如何更改 JS 函数的作用？

Question

我正在学习 Javascript，并且正在尝试清理我的代码。代码非常简单:它只是通过单击一些不同的按钮来更改某些文本的颜色。当您单击红色按钮时，文本变为红色，单击蓝色按钮时，文本变为蓝色，等等。代码如下:

HTML:

<h1 id="title">Change my color!</h1>

<button id="btn" onclick="colorRed()">Red</button>
<button id="btn" onclick="colorGreen()">Green</button>
<button id="btn" onclick="colorBlue()">Blue</button>
<button id="btn" onclick="colorBlack()">Black</button>

Javascript:

var title = document.getElementById("title");

function colorRed() {
  title.style.color = "red";
}

function colorGreen() {
  title.style.color = "green";
}

function colorBlue() {
  title.style.color = "blue";
}

function colorBlack() {
  title.style.color = "black";
}

此代码有效。我的问题是如何清理我的 Javascript；在我有 20 个按钮的情况下，编写 20 个不同的功能显然不是可行的方法。

我确实为每种颜色尝试了以下方法，但没有用:

Javascript:

var title = document.getElementById("title");

var btn = document.getElementById("btn");

function changeColor() {
  if(btn.innerHTML == "Red") {
    title.style.color = "red";
  } else if ...
}

当我尝试通过查看按钮的内部 HTML 是否等于某种颜色来确定单击了哪个按钮时，我认为它出错了，但我不确定如何解决这个问题。非常感谢您的帮助!

编辑:我的问题不是 Change an element's background color when clicking a different element 的重复问题因为我写的代码已经可以工作了，我只想学习如何清理它。

Answer 1

可能最简单的方法是制作一个 changeColor 函数并在事件中将颜色传递给它:

var title = document.getElementById("title");

function changeColor(color) {
   console.log(color);
   title.style.color = color;
}

<h1 id="title">Change my color!</h1>

<button class="btn" onclick="changeColor('red')">Red</button>
<button class="btn" onclick="changeColor('green')">Green</button>
<button class="btn" onclick="changeColor('blue')">Blue</button>
<button class="btn" onclick="changeColor('black')">Black</button>

旁注:您真的不应该重复id，而应该使用class。

通常不建议使用内联事件处理程序，而是使用 addEventListener。与其为每个元素添加一个事件监听器，我建议添加一个公共(public)父元素，将一个事件监听器附加到它并检查事件 ( "event delegation" ) 以确定应用哪种颜色:

var title = document.querySelector('#title');

document.querySelector('#button-container').addEventListener('click', function(event) {
   var color = event.target.getAttribute('data-color')
   title.style.color = color;
}, false)

<h1 id="title">Change my color!</h1>
<div id="button-container">
  <button data-color="red">Red</button>
  <button data-color="green">Green</button>
  <button data-color="blue">Blue</button>
  <button data-color="black">Black</button>
</div>