Question

我正在尝试为变量颜色指定绿色或红色的值，并从那里为imagePath提供特定的src，具体取决于赋予颜色的值。

从那里我可以通过按任意按钮在红色和绿色之间连续切换衬衫图像。

实际发生的是衬衫颜色变为红色。之后，即使按绿色按钮激活green()功能，它也不会变为绿色。

My HTML code:

<html>
<head>
    <script src="oands.js" type="text/javascript"></script>
    <script type="text/javascript">
    var color;
    function red(){color = "red"; change()}
    function green(){color = "green"; change()}

    function change()
    {
         if(color = "red")
         {
             imagePath = 'images/red-t-shirt.png';
          }
         if(color = "green")
         {
             imagePath = 'images/green-t-shirt.png';
         }
        O("shirt").src = imagePath;
    }
    </script>
    <title></title>
</head>

<body>
    <div id="wrapper">
        <div id="content">
            <img id="shirt" name="shirt" src="images/white-t-shirt.png">
            <div class="smallbox" id="redBox" onclick="red()">
                red
            </div>

            <div class="smallbox" id="greenBox" onclick="green()">
                green
            </div>
        </div>
    </div>
</body>
</html>

oands.js中的代码：

function O(obj)
{
    if (typeof obj == 'object') 
    return obj;

        else 
    return document.getElementById(obj) 
}

Answer 1

你应该这样做：

 if(color == "red")
 {
   imagePath = 'images/red-t-shirt.png';
 }
 if(color == "green")
        //^^ note the logical compare operator. Double equals
 {
   imagePath = 'images/green-t-shirt.png';
 }

另外，在这一行：

function red(){color = "red"; change();}
        //You're missing a semicolon ^^

更准确一点，如果您知道color始终是一个字符串，则应使用===。有关详细信息，请参阅此帖子：Which equals operator (== vs ===) should be used in JavaScript comparisons?

使用onclick功能改变图像颜色不起作用？

1 个答案: