调用getElementsByClassName函数后，某些图像不会更改

Question

在打开暗模式功能后，在我的应用中，我希望将某些图像更改为其他图像。但是，当图像由两张图片组成，并且此后的其余图像也没有改变时，则不会发生here is image that cleary 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]未定义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个元素，而不是数组。另外，您在页面上没有具有此ID的元素

Answer 2

兄弟，这就是全部代码吗？您能告诉我们第88行还是什么是88行？