Javascript 如何使onclick函数更改两个图像的src_Javascript_Getelementbyid

Javascript 如何使onclick函数更改两个图像的src

javascript

Javascript 如何使onclick函数更改两个图像的src,javascript,getelementbyid,Javascript,Getelementbyid,我应该将脚本添加到HTML文件中，这样当我单击星级评定系统中的第一个星级时，它会将src更改为“star on.png”，而不是“star off.png”。我能做到。但是我不知道怎么做，如果用户单击第二个星，它会将第一个星和第二个星的src都更改为“star on.png” 以下是我的老师提供的代码：  <html> <head> <!-- 2.

我应该将脚本添加到HTML文件中，这样当我单击星级评定系统中的第一个星级时，它会将src更改为“star on.png”，而不是“star off.png”。我能做到。但是我不知道怎么做，如果用户单击第二个星，它会将第一个星和第二个星的src都更改为“star on.png”

以下是我的老师提供的代码：

<!-- 1. PUT YOUR NAME IN THIS COMMENT -->
<html>
    <head>
        <!-- 2. DO NOT EDIT THE CSS -->
        <style type="text/css">
            body {
                margin: 0;
            }
            div {
                width: 520px;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }

            img {
                width: 100px;
            }
        </style>
        <!-- 2.5 YOU MAY ALTER THE STYLING OF THE BUTTON IF YOU WISH. --> 
        <style type="text/css">
            button {
                width: 200px;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <!-- 3. DO NOT ALTER THE HTML EXCEPT TO ADD ONCLICK, ONLOAD, AND SIMILAR ATTRIBUTES -->
    <!-- AS NEEDED -->
    <body>
        <div>
            <img src="star-off.png"  id="one" class="2">
            <img src="star-off.png" id="two" class="2">
            <img src="star-off.png" id="three">
            <img src="star-off.png" id="four">
            <img src="star-off.png" id="five">
        </div>
        <button id="reset" onclick="document.getElementById('one').src='star-off.png'">Reset</button>
        <!-- 4. YOU MAY PUT YOUR SCRIPTING HERE -->

        <script>
            document.getElementById('one').onclick = function () {
            document.getElementById('one').src="star-on.png";
            }
            document.getElementById('two').onclick = function () {
            document.getElementById('two').src="star-on.png";
            }
            document.getElementById('three').onclick = function () {
            document.getElementById('three').src="star-on.png";
            }
            document.getElementById('four').onclick = function () {
            document.getElementById('four').src="star-on.png";
            }
            document.getElementById('five').onclick = function () {
            document.getElementById('five').src="star-on.png";
            }
        </script>
    </body>
</html>


身体{
保证金：0；
}
div{
宽度：520px；
显示：块；
左边距：自动；
右边距：自动；
}
img{
宽度：100px；
}
钮扣{
宽度：200px；
显示：块；
左边距：自动；
右边距：自动；
}
重置
document.getElementById（'one'）。onclick=function（）{
document.getElementById（'one'）.src=“star on.png”；
}
document.getElementById（'two'）.onclick=function（）{
document.getElementById（'two'）.src=“star on.png”；
}
document.getElementById（'three'）。onclick=function（）{
document.getElementById（'three'）.src=“star on.png”；
}
document.getElementById（'four'）。onclick=function（）{
document.getElementById（'four'）.src=“star on.png”；
}
document.getElementById（'five'）。onclick=function（）{
document.getElementById（'five'）.src=“star on.png”；
}

除了script标签和按钮内部的onclick之外，这都是我老师的代码

这就是它看起来的样子：

好吧，你的脚本中已经包含了你要做的大部分内容。请看以下每一行：

document.getElementById（'one'）。onclick=function（）{
document.getElementById（'one'）.src=“star on.png”；
}
document.getElementById（'two'）.onclick=function（）{
document.getElementById（'two'）.src=“star on.png”；
}
document.getElementById（'three'）。onclick=function（）{
document.getElementById（'three'）.src=“star on.png”；
}
document.getElementById（'four'）。onclick=function（）{
document.getElementById（'four'）.src=“star on.png”；
}
document.getElementById（'five'）。onclick=function（）{
document.getElementById（'five'）.src=“star on.png”；
}

本质上，每一个都是说，通过其Id属性选择元素，在前面的组中由本部分中的“Id=”“”标识：

<img src="star-off.png"  id="one" class="2">
<img src="star-off.png" id="two" class="2">
<img src="star-off.png" id="three">
<img src="star-off.png" id="four">
<img src="star-off.png" id="five">

现在，如果单击第二个星号，您只需将ID为'two'的元素的src属性更改为'star on.png'图像。因此，如果您还想更改星号之前的元素，它的ID为“one”，因此您需要在事件处理程序中添加这一行

document.getElementById('one').src = "star-on.png";

当然，有更有效的方法可以做到这一点，但毫无疑问，随着课程的进展，您将了解这些方法。以下是此更新中事件处理程序的外观：

document.getElementById('two').onclick = function () {
    document.getElementById('two').src="star-on.png";
    document.getElementById('one').src = "star-on.png";
}

请以代码的形式发布代码，而不是截图。要执行此操作，请复制粘贴您的代码，然后选择它，然后按CTRL+K对其进行格式化。噢，谢谢。我知道事情会很简单。谢谢你的帮助，也谢谢你对我的解释。你刚刚救了我的分数！

document.getElementById('one').src = "star-on.png";

document.getElementById('two').onclick = function () {
    document.getElementById('two').src="star-on.png";
    document.getElementById('one').src = "star-on.png";
}