问题描述
我对 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>
first.js：
var button = document.getElementById("BUTTON");
var color = document.getElementById("TEXT").style.color;
function changeColor(color) {
color = "#0EE5D0";
};
button.onclick = changeColor();
谢谢！
解决方法
这是一个可以满足您要求的代码段。
- 我删除了
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>您的代码有两个主要问题。两者都已在上述评论中确定。
首先，button.onclick = changeColor(); 不会将函数分配给 onclick 事件。它调用函数并将函数的返回值分配给onclick，这不是您的本意。
其次，color = "#0EE5D0"; 与 DOM 元素无关，因此更改其值对 DOM 元素没有影响。
var button = document.getElementById("BUTTON");
button.onclick =function changeColor() {
document.getElementById("TEXT").style.color = "#0EE5D0";
};