调用 getElementsByClassName 函数后，某些图像没有变化

Question

在我的应用程序中，打开深色模式功能后，我希望将一些图像更改为其他图像。但当图像由两张图片组成时，这种情况就不会发生，然后此后的其余图像也不会发生变化，这是清楚描述问题的图像。

这是 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');

        }

页面加载时，控制台面板显示错误

“TypeError：document.getElementsByClassName(...)[0] 未定义 star_avg_frame.php:88:22（参考最后几行代码）”

我也尝试过getElementsByIdName，getElementsByClassName但不是这样。您知道为什么会发生图像上显示的情况吗？我必须补充一点，如果没有“半星”，一切都会很好。

在此先感谢您的帮助！

Answer 1

您可以使用querySelector(".star1img")代替getElementsByClassName，并获得第一个元素class="star1img"这document.getElementById("half_star_1")[0].src = "starou_half_1_dark.png"没有任何意义，因为getElementById你得到的是 1 个元素，而不是数组。所以你不需要在它后面使用[0]。另外，页面上没有具有此 id 的元素