javascript - 如何将 getElementbyId 变量分配给 html 代码

Question

我有一个戴着帽子的人的形象。我在这张图片上有帽子的 «master.png» 图片(单独)，每当用户点击下面的不同颜色样本时，它会变成不同的图片(相同的帽子/不同的颜色)。

javascript 函数有效，但我无法将颜色变量值分配给我的色板。因此，无论您单击哪个样本，只会显示列出的最后一个 js src 图像。我也不确定我的 javascript 变量代码是否正确。

我无法在网上找到有关如何执行此操作的任何信息。请帮忙!

代码如下:

<script type="text/javascript">
function hat(color)
{
var color = ['redhat', 'bluehat', 'blackhat'];
document.getElementById("master").src="images/redhat.png"; 
document.getElementById("master").src="images/bluehat.png"; 
document.getElementById("master").src="images/blackhat.png"; 
}
</script>



<img id="hat" src="images/manwearinghat.png" width="100%" class="center">


<img id="master" src="images/masterhat.png" width="100%" alt=" " name="master">




<img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('redhat');" value="redhat" style="z-index:3">


<img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('bluehat');" value="bluehat" style="z-index:3">


<img src="images/swatchs/blackhat.png" width="69" height="69
" onclick="hat('blackhat');" style="z-index:3">

Answer 1

你可以使用像这样简单的东西:

function hat(color) {
    document.getElementById("master").src = "images/" + color + ".png"; 
}