时间戳

首页 > 解决方案 > 如何使用Javascript按名称更改按钮背景颜色

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

问题描述

我的网页上有几个按钮，当我根据按钮的名称单击它们时想要设置背景颜色的样式。我希望所有的“Toms”都是浅灰色的，所有的“Dicks”都是浅绿色的，而所有其他的（“Harrys”）都是浅黄色的。我将以下代码添加到我的外部 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()"

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

    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';
    }

我究竟做错了什么？

标签： javascriptfunction

解决方案

document.getElementsByTaName("button") 正在获取所有按钮。您想要做的是单独检查每个按钮并应用颜色。

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

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

推荐阅读