JS текст изменения функции при нажатии кнопки работает только на рабочем столе

Question

У меня есть функция, настроенная так, что при нажатии кнопки с надписью «Ночь» активируется темный режим, а текст кнопок меняется на «День». Это отлично работает в моей навигации на рабочем столе, но по какой-то причине не работает в мобильной навигации. Вы можете просмотреть сайт здесь, чтобы понять, что я имею в виду: 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

ну, идентификатор каждого узла должен быть уникальным в соответствии с правилами, поэтому вместо того, чтобы указывать идентификатор обеих кнопок, вы можете дать им общий класс и достичь результата.

<!-- 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 code

/* 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";
    })

}

или если вас не интересуют правила и вы все равно хотите, чтобы у них обоих был одинаковый идентификатор. вы все равно можете получить ожидаемое поведение с помощью этого 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";
    })

}