JS函数更改按钮上的文本点击仅适用于桌面

Question

我设置了一个功能，这样当点击标有"The Night"的按钮时，黑暗模式就会激活，按钮文本会变为"The Day"。这在我的桌面导航中运行良好，但由于某些原因，它在放入我的移动导航时不起作用。你可以在这里查看网站，了解我的意思：https://blanklandscape.com/

HTML

<!-- Navigation -->
<nav class="sidenav">
<div id="nav" class='container'>
<a class='menu-button' id='menu-f'>The Forest</a>
<a class='menu-button' id='menu-o'>The Ocean</a>
<a class='menu-button' id='menu-s'>The Sky</a>
<a class='menu-button' id='menu-m'>The Mountain</a>
<input type="button" value="The Night" id="dark-btn" class="dark-mode" onclick="myFunction(); change();" />
<a class='menu-button' id='menu-a'>About</a>
</div>
</nav>
<!-- Navigation Mobile -->
<div id="mobilenav" class="overlay">
<div class="overlay-content">
<a class='mob-menu-button' id='mob-menu-f'>The Forest</a>
<a class='mob-menu-button' id='mob-menu-o'>The Ocean</a>
<a class='mob-menu-button' id='mob-menu-s'>The Sky</a>
<a class='mob-menu-button' id='mob-menu-m'>The Mountain</a>
<input type="button" value="The Night" id="dark-btn" class="dark-mode" onclick="myFunction(); change();" />
<a class='mob-menu-button' id='mob-menu-a'>About</a>
</div>
</div>

JS-

/* Day/Night Mode */
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
/* Day/Night Button Text */
function change() {
var elem = document.getElementById("dark-btn");
if (elem.value=="The Night") elem.value = "The Day";
else elem.value = "The Night";
}

Answer 1

根据规则，每个节点的id都应该是唯一的，所以你可以给它们一个公共类来实现结果，而不是给这两个按钮id。

<!-- Navigation -->
<nav class="sidenav">
<div id="nav" class='container'>
<a class='menu-button' id='menu-f'>The Forest</a>
<a class='menu-button' id='menu-o'>The Ocean</a>
<a class='menu-button' id='menu-s'>The Sky</a>
<a class='menu-button' id='menu-m'>The Mountain</a>
<input type="button" value="The Night" id="dark-btn-1" class="dark-mode dark-btn" onclick="myFunction(); change();" />
<a class='menu-button' id='menu-a'>About</a>
</div>
</nav>
<!-- Navigation Mobile -->
<div id="mobilenav" class="overlay">
<div class="overlay-content">
<a class='mob-menu-button' id='mob-menu-f'>The Forest</a>
<a class='mob-menu-button' id='mob-menu-o'>The Ocean</a>
<a class='mob-menu-button' id='mob-menu-s'>The Sky</a>
<a class='mob-menu-button' id='mob-menu-m'>The Mountain</a>
<input type="button" value="The Night" id="dark-btn-2" class="dark-mode dark-btn" onclick="myFunction(); change();" />
<a class='mob-menu-button' id='mob-menu-a'>About</a>
</div>
</div>

在你的js代码中

/* Day/Night Button Text */
function change() {
var elems = document.querySelectorAll(".dark-btn");
elems.forEach(elem => {
if (elem.value=="The Night") elem.value = "The Day";
else elem.value = "The Night";
})
}

或者，如果你不在乎规则，仍然希望它们都有相同的id。你仍然可以通过这个js代码获得预期的行为

function change() {
var elems = document.querySelectorAll("#dark-btn");
elems.forEach(elem => {
if (elem.value=="The Night") elem.value = "The Day";
else elem.value = "The Night";
})
}