调用 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 的元素