Некоторые изображения не изменяются после вызова функции getElementsByClassName - PullRequest
Новая
       23

Некоторые изображения не изменяются после вызова функции getElementsByClassName

0 голосов
/ 31 марта 2020

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

А это код PHP и javascript: 

    <?php } else if ($rating_avg > 4.75 && $rating_avg < 6) { ?>
        <form class="star-form" action="star_frame.php?post_id=<?= $post_id ?>" method="POST">
            <div class='stars_avg_div' align='center'>


                <i class='star1' id='star1' style='width:20px; height:20px; '><img class='star1img' src='starou.png' style='width:20px; height:20px;background-color:gold; '></i>


                <i class='star2' id='star2' style='width:20px; height:20px; '><img class='star2img' src='starou.png' style='width:20px; height:20px;background-color:gold;'></i>


                <i class='star3' id='star3' style='width:20px; height:20px; '><img class='star3img' src='starou.png' style='width:20px; height:20px;background-color:gold;'></i>


                <i class='star4' id='star4' style='width:20px; height:20px; '><img class='star4img' src='starou.png' style='width:20px; height:20px;background-color:gold;'></i>


                <i class='star5' id='star5' style='width:20px; height:20px; '><img class='star5img' src='starou.png' style='width:20px; height:20px;background-color:gold;'></i>

            </div>
        </form>
    <?php } ?>

    function darkmode() {
            $('*').addClass('dark');
            $('avg_iframe').addClass('dark');

            localStorage.setItem('mode', 'dark');


            document.getElementsByClassName("star1img")[0].src = "starou_dark.png";
            document.getElementsByClassName("star2img")[0].src = "starou_dark.png";
            document.getElementsByClassName("star3img")[0].src = "starou_dark.png";
            document.getElementsByClassName("star4img")[0].src = "starou_dark.png";
            document.getElementsByClassName("star5img")[0].src = "starou_dark.png";

            document.getElementById("half_star_1")[0].src = "starou_half_1_dark.png";
            document.getElementById("half_star_2")[0].src = "starou_half_2_dark.png";

        }

Во время загрузки страницы на панели консоли отображается ошибка

"TypeError : document.getElementsByClassName (...) [0] не определено star_avg_frame. php: 88: 22 (ссылка на последние строки кода) "

Я пробовал также getElementsByIdName вместо getElementsByClassName но это было не так. У вас есть идея, почему ситуация, показанная на изображении, имеет место? Я должен добавить, что, если нет «пол звезд», все работает хорошо.

Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 31 марта 2020

Вы можете использовать querySelector(".star1img") вместо getElementsByClassName, и вы получите первый элемент с class="star1img"

И document.getElementById("half_star_1")[0].src = "starou_half_1_dark.png" не имеет смысла, потому что с getElementById вы получаете 1 элемент, а не массив. Так что вам не нужно использовать [0] после него. Также у вас нет элементов с этим идентификатором на странице

...