调用getElementsByClassName函数后部分图片没有变化

Question

在我的应用程序中，在打开深色模式功能后，我希望我的一些图像可以更改为其他图像。但是当图像由两张图片组成时就不会发生这种情况，然后这之后的其余图像也不会发生太大变化here is image that clearly describes the problem。

这是 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] is undefined star_avg_frame.php:88:22 (reference to last lines of code)"

我也尝试 getElementsByIdName 而不是 getElementsByClassName，但事实并非如此。你知道为什么会出现图像上显示的情况吗？我必须补充一点，如果没有 "half stars"，一切正常。

在此先感谢您的帮助！

Answer 1

您可以使用 querySelector(".star1img") 而不是 getElementsByClassName 并使用 class="star1img"

获得第一个元素

和 document.getElementById("half_star_1")[0].src = "starou_half_1_dark.png" 没有意义，因为使用 getElementById 你得到 1 个元素，而不是数组。所以你不需要在它后面使用 [0] 。此外，您在页面

上没有具有此 ID 的元素

调用getElementsByClassName函数后部分图片没有变化

Some of images does not change after calling the getElementsByClassName function

html

javascript

getelementsbyclassname