请帮忙！我做了两个简单的复选框来更改同一页上的文本颜色，但结果只适用于一个复选框(左框(-(右框(不起作用。如果我评论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>Example</title>
</head>
<body>
<div class="container">
<div class="left-box">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox1" />
</div>
<div class="display-text">
<h1 id="greetingL">Hello</h1>
</div>
</div>
<div class="right-box">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox2" />
</div>
<div class="display-text">
<h1 id="greetingR">Hello</h1>
</div>
</div>
</div>
<script src="./checkboxleft.js"></script>
<script src="./checkboxright.js"></script>
</body>
</html>
JavaScript用于左框
const leftcheckbox = document.getElementById("checkbox1");
const greetingtex = document.getElementById("greetingL");
leftcheckbox.addEventListener("change", () => {
if (leftcheckbox.checked) {
greetingtex.style.color = "Red";
} else {
greetingtex.style.color = "";
}
});
JavaScript用于右框
const rightcheckbox = document.getElementById("checkbox2");
const greetingtex = document.getElementById("greetingR");
rightcheckbox.addEventListener("change", () => {
if (rightcheckbox.checked) {
greetingtex.style.color = "Red";
} else {
greetingtex.style.color = "";
}
});
您要导入两个脚本，这些脚本具有相同的常量"greetingtex"；。您可以将名称更改为其中一个，它应该可以工作。
const leftcheckbox = document.getElementById("checkbox1");
const greetingtexL = document.getElementById("greetingL"); // name change
leftcheckbox.addEventListener("change", () => {
if (leftcheckbox.checked) {
greetingtexL.style.color = "Red";
} else {
greetingtexL.style.color = "";
}
});
const rightcheckbox = document.getElementById("checkbox2");
const greetingtexR = document.getElementById("greetingR"); // name changed
rightcheckbox.addEventListener("change", () => {
if (rightcheckbox.checked) {
greetingtexR.style.color = "Yellow";
} else {
greetingtexR.style.color = "";
}
});<div class="container">
<div class="left-box">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox1" />
</div>
<div class="display-text">
<h1 id="greetingL">Hello</h1>
</div>
</div>
<div class="right-box">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox2" />
</div>
<div class="display-text">
<h1 id="greetingR">Hello</h1>
</div>
</div>
</div>您必须始终在打开控制台的情况下工作，可能会有一条错误消息告诉您发生了什么，在这种情况下，您有一个同名的常量。
想象一下，尽管这两个脚本是不同的文件，但当你在同一个html中导入它们时，它们就好像变成了一个。也许你认为他们的作用域不会有问题，因为它们是不同的脚本，我希望你有动力使用控制台，并学会处理代码中的错误，这是日常编程xD。