Javascript img tag src switch函数不起作用

Question

>我有一个小应用程序，它使用3张图像作为按钮，图像是不同的颜色，图像按钮上方有一副大眼镜，根据您按下的颜色按钮眼镜的颜色会发生变化以匹配按下的按钮的颜色。问题是我收到"无法将 src 设置为 null"错误。

这是一个jsfiddle：http://jsfiddle.net/vAF8S/

这是函数

//Functions that change the glasses image
function changeColor(a){
    var img = document.getElementById("imgG");
    img.src=a;
}

Answer 1

你有两个

标签的 ID。 您应该只有一个 ID。 更改您的 HTML。

<section id="banner" >
        <img id="imgG" src="images/orangeG.png"><br>
        <img id="wcolorButton" src="images/whiteT.png"  />
        <img id="bcolorButton" src="images/blueT.png" />
        <img id="ocolorButton" src="images/orangeT.png"  onClick="changeColor('images/whiteG.png')" />
    </section>

小提琴

Answer 2

您收到此错误是因为您已将 ID 应用于同一元素两次

使用此网页

<section id="banner" >
    <img class="glasses" id="imgG" src="images/orangeG.png"><br>
    <img class="wcolorButton" src="images/whiteT.png"  />
    <img class="bcolorButton" src="images/blueT.png" />
    <img class="ocolorButton" src="images/orangeT.png"  onClick="changeColor('images/whiteG.png')" />
</section>