JavaSctipt：单击按钮时更改文本元素的颜色

Question

我对 HTML 和 JavaScript 完全陌生，我想做一些简单的事情。 我想要一个按钮，它下面是一些文字。 当我单击按钮时，我希望文本的颜色发生变化（现在假设从黑色变为红色）。 这是我在这个问题上的尝试。

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Page</title>
</head>
<body>
    <button id="BUTTON" onclick="changeColor">Click me</button>
    <p id="TEXT">Text</p>
</body>
<script src="first.js"></script>
</html>

第一个.js：

var button = document.getElementById("BUTTON");
var color = document.getElementById("TEXT").style.color;

function changeColor(color) {
    color = "#0EE5D0";
};
button.onclick = changeColor();

谢谢！

Answer 1

这是一个可以满足您要求的代码段。

我删除了color变量并将其替换为text ，即您要更改其颜色的元素。
我修改了changeColor函数以返回选择的颜色。
正确使用onclick侦听器。

 let button = document.getElementById("BUTTON"); let text = document.getElementById("TEXT") function changeColor() { return "#0EE5D0"; }; button.addEventListener("click", () => { text.style.color = changeColor() })

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>First Page</title> </head> <body> <button id="BUTTON" onclick="changeColor">Click me</button> <p id="TEXT">Text</p> </body> <script src="first.js"></script> </html>

Answer 2

您的代码有两个主要问题。 两者都已在上述评论中确定。

首先， button.onclick = changeColor(); 不会将该功能分配给 onclick 事件。 它调用函数并将函数的返回值分配给onclick，这不是您的意图。

二、 color = "#0EE5D0"; 与 DOM 元素无关，因此更改其值对 DOM 元素没有影响。

var button = document.getElementById("BUTTON");

button.onclick =function changeColor() {
    document.getElementById("TEXT").style.color = "#0EE5D0";
};

JavaSctipt：单击按钮时更改文本元素的颜色

问题描述

2 个解决方案

解决方案1
0 2021-07-20 18:14:54

解决方案2
0 2021-07-20 18:14:54

JavaSctipt：单击按钮时更改文本元素的颜色

问题描述

2 个解决方案

解决方案1 0 2021-07-20 18:14:54

解决方案2 0 2021-07-20 18:14:54

解决方案1
0 2021-07-20 18:14:54

解决方案2
0 2021-07-20 18:14:54