Javascript 如何通过单击更改按钮的颜色

我想在单击时更改按钮的颜色 我使用了这个代码，但它不起作用

onclick => myFunction();
function myFunction() {
  document.getElementById('#"+buttonId+"').style.color = "red";
}

AddEventListener是一种比在HTML中使用事件属性更好的实践，我建议您尝试使用它（如果您无法在您的情况下使用它） 在getElementById中，也不能将#字符用作CSS

---

此外，如果您想更改颜色按钮，而不仅仅是文本颜色，那么属性“color”将不是好的，但由于我们不知道按钮是如何制作的，因此我们无法在这方面真正帮助您

我认为

按钮ID

未定义或错误

试试这个：

onclick => myFunction();

function myFunction() {
    var buttonId = 'myButton';
    document.getElementById(buttonId).style.color = "red";
}

在HTML中：

<button id="myButton">hello I am the button</button>

你好，我是按钮

请试试这个

函数myFunction（）{
document.getElementById（'myButton'）.style.color=“红色”；
}

改变颜色

constchangecolor=（）=>{
const button=document.getElementById（'button'）；
button.style.color='red'
}

---

单击我

首先，从这里可以看到，Mozilla开发者网络是DOM操作的绝佳资源。以下是MDN站点的链接：

下面是一个使用MDN站点中的addeventlistener方法的示例

const buttonElement = document.getElementById('btn');
buttonElement.addEventListener('click', function (event) {
  event.target.style.backgroundColor = "red";
});

首先，将包含事件“btn”的元素的id存储在变量中，然后对ButtonneElement变量调用addEventListener（）方法。第一个参数“click”定义事件类型。第二个参数是包含事件操作的函数。希望这有帮助

编辑：另一位用户指出您想要更改背景颜色，而不是文本颜色。我误读了你的问题，我想其他大多数人也误读了。我更新了我的答案

function myFunction() {
  document.getElementById(buttonId).style.color = "red";
}

• 不要在菜单中使用#
• 如果您想使用#，请尝试使用或

---

要使其正常工作，应将de

此对象或元素id传递到函数中。代码如下所示：

const button = document.getElementById('id');
button.onclick = ()=> { .   // you can attach event as a property as well.
 button.style.color="red";
} 


函数myFunction（事件）{
buttonId=event.id；
document.getElementById（buttonId）.style.color=“红色”；
}

按钮1
按钮2

ES5-
var buttonId=document.getElementById（“buttonId”）//输入您的按钮Id
addEventListener（“单击”，函数（）{
buttonId.style.color=“红色”；
})


ES5+
const buttonId=document.getElementById（“buttonId”）//放入按钮Id
buttonId.addEventListener（“单击”，（）=>{
buttonId.style.color=“红色”；
})
答案是，您应该只使用getElementById中没有哈希标记或引号的按钮ID。正确的行应如下所示（当然，buttonId必须初始化）：

好吧，你有很多答案，只会涵盖一些额外的东西

而不是像这样编写连接：

document.getElementById('#"+buttonId+"').style.color = "red";

您可以使用ES6模板文本：

document.getElementById(`${buttonId}`).style.color = "red";

为了让事情更简单，我会这样解决：

const button = document.getElementById('id');
button.onclick = ()=> { .   // you can attach event as a property as well.
 button.style.color="red";
} 

（您不需要将onclick属性附加到按钮标记上，这样可以使标记更清晰）

我不是说这是最好的方法，但它非常紧凑。
使用硬编码值设置颜色和/或背景颜色相当简单，但不便于重复使用或更改模板，因为您需要编辑对所用硬编码颜色的引用。下面的两个按钮都设置了相同的颜色，但第二个按钮使用的是
类
，根据声明该类的任何样式表，该类可以具有不同的样式。这两个按钮都没有内联事件处理程序-首选的方法是从外部分配事件处理程序，这与使用样式表具有类似的好处~它保持HTML标记更干净，允许重用，并且如果js位于单独的文件中，在一个位置所做的更改会影响所有实例


document.querySelector（'[name=“bttn-x”]'）。onclick=function（e）{
这个.style.color='red'；
这个.style.backgroundColor='yellow'；
}
document.querySelector（'[name=“bttn-y”]'）。onclick=function（e）{
this.classList.toggle（'fancy'）；
}
[type='button']{
填充：0.5雷姆；
过渡：所有输入输出均为500ms；
}
.幻想{
背景：黄色；
颜色：红色；
动画名称：FancyBTN；
动画持续时间：0.5s；
}
@关键帧fancybttn{
来自{transform:scale（1）}
30%{变换：比例（1.1）}
到{变换：比例（1）}
}

请首先添加一个，您不需要+buttonId+，因为您已经在JS代码中了。接下来，这里是一个例子，去掉#，您可能希望设置背景颜色而不是颜色，例如document.getElementById（'buttonId'）.style.backgroundColor=“red”；当您像使用getElementById一样使用标准DOM例程时，可以去掉“#”前缀，这不是必需的。在使用之前还要养成从getElementById检查返回值的习惯，在这种情况下，返回值将是“未定义”的，如果您进行检查，您会看到。不要使用getElementById中的#，也不要通过打开双引号文档来关闭引号。getElementById（buttonId）会更好，因此他要求更改按钮颜色。当前您正在更改文本颜色。@Mick是的，但没有显示按钮是如何制作的，很难在这方面提供帮助AddEventListener比我的opinionAmram中的事件属性要求更改按钮颜色要好。您正在更改按钮的文本颜色。@Mick是的，但如果不显示按钮是如何制作的，很难在这方面提供帮助。@Mick。我想我们几乎都忽略了这个细节。我想我们都在关注他提供的代码。“getElementById（buttonId）”和“getElementById（
${buttonId}
）之间有什么区别？”？为什么要使用模板Literal呢？@ShigehiroKamisama这是答案！如果您使用“getElementById（buttonId）”，那么buttonId应该是一个变量，需要将buttonId值作为字符串保存。因此，考虑到这一点，我们知道我们将只使用buttonId
const button = document.getElementById('id');
button.onclick = ()=> { .   // you can attach event as a property as well.
 button.style.color="red";
}