如何使用Javascript按名称更改按钮背景颜色

我有几个按钮在我的网页上，并希望样式的背景颜色，当我点击他们根据按钮的名称。我希望所有的“汤姆”都是浅灰色，所有的“迪克”都是浅绿色，其余的（“哈利”）都是浅黄色。我在我的外部Javascript页面中添加了以下代码，但它不起作用：

    function bgColor() {
      var x = document.getElementsByTagName("button").name;
      if (x == "Tom") {
      document.getElementsByTagName("button").style.backgroundColor=
      "lightgray";
      } else if (x == "Dick") { 
      document.getElementsByTagName("button").style.backgroundColor=
      "lightgreen";
      } else { 
      document.getElementsByTagName("button").style.backgroundColor=
      "lightyellow";           
      }
    }

HTML的内容如下，但介于小于/大于符号之间，当然：

    button type="button" name="Tom" onclick="bgColor()"
    button type="button" name="Dick" onclick="bgColor()"
    button type="button" name="Harry" onclick="bgColor()"

编辑以添加 我不知道如何直接回复米克尔的评论。我试着简单地发布另一条评论，但它不允许我添加代码。不管怎样，我尝试了他建议的修复方法，但对我也不起作用

    function bgColor() {
      var tom = document.querySelector('button[name="Tom"]')
      .style.backgroundColor = 'lightgray';
      var dick = document.querySelector('button[name="Dick"]')
      .style.backgroundColor = 'lightgreen';
      var harry = document.querySelector('button[name="Harry"]')
      .style.backgroundColor = 'lightyellow';
    }

---

我做错了什么？

文档。getElementsByTaName（“按钮”）正在获取所有按钮。您要做的是分别检查每个按钮并应用颜色

你可以用下面的代码来做，这将改变“Tom”的颜色。您可以重复它，使其适用于其他按钮

function bgColor() {
  var tom = document.querySelector('button[name="Tom"]').style.backgroundColor = 'purple'
}

---

正如@Mikkel所说，您的选择器是错误的-您需要使用一个来获取与

name

属性匹配的元素

---

然而，在这种特殊情况下，您也遇到了一个更奇怪的问题-您必须更改函数的名称-

bgColor

也是元素上属性的名称，我认为这会导致您进一步的问题。-

如果将名称更改为类似于

changecorders

的名称，则不应出现此问题

顺便说一句，不需要将QuerySelector分配给变量，在这种情况下，您可以运行它们

函数changeColors（）{
document.querySelector（'button[name=“Tom”]”）。style.backgroundColor='lightgray'；
document.querySelector（'button[name=“Dick”]”）。style.backgroundColor='lightgreen'；
document.querySelector（'button[name=“Harry”]”）。style.backgroundColor='lightyellow'；
}

X
X
X

首先，使用bgColor作为用户定义的函数名将抛出类型错误，因为它是JS（对象属性）的保留关键字，尽管已弃用

第二个->var x=document.getElementsByTagName（“按钮”）.name显然会抛出一个错误x未定义，因为此语法不带“.name”应该以数组形式返回页面上的所有按钮，这样您就可以循环访问单个按钮的属性，例如名称

因此我们改用这个var x=document.getElementsByTagName（“按钮”），它在页面上返回一个按钮数组

话虽如此，让我们看看如何修改您的代码以实现您的期望：

HTML:

此方法非常有用，因为假设您有两个同名的按钮，例如'Tom'，但您希望其中一个按钮在更改背景颜色的同时做一些额外的操作，您可以引用他们的ID来实现这一点，使用e.target.ID或current_button.ID在某种条件下为特定的'Tom'按钮连接另一个处理程序

---

希望这有帮助。

谢谢你，米克尔。我试过了，但也没用。我编辑了我原来的问题，加入了你建议的新代码。我还有什么不对劲吗？它正在工作！感谢大家的专业知识和耐心。别担心——别忘了将解决方案标记为答案：）无论是闪亮还是我帮助解决了您的问题。

 <button type="button" name="Tom" onclick="buttonBgColor(event)"> Tom</button>
 <button type="button" name="Dick" onclick="buttonBgColor(event)"> DicK </button>
 <button type="button" name="Harry" onclick="buttonBgColor(event)"> Harry </button>

   function buttonBgColor(e) {
     const buttons = document.getElementsByTagName("button").name;

      for(button of buttons){

         const current_button = e.target;

          if(current_button.name == 'Tom'){
            current_button.style.backgroundColor = 'lightgray'
          }else if(current_button.name == 'Dick'){
            current_button.style.backgroundColor = 'lightgreen'
          }else if(current_button.name == 'Harry'){
            current_button.style.backgroundColor = 'lightyellow'
          }
      }
    }