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

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

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

<!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";
};

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

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

解决方法

相关推荐