Question

我正在创建一个简单的网站，用于更改单击按钮时显示的图像。但是，当我点击按钮时，我的代码似乎无法正常工作！点击！＆＃39;显示alt文本而不是图像更改。图像的来源非常好，因为当我在脚本外使用相同的源时，图像会显示出来。

<head>
    <title>Pic Change</title>
    <meta charset="utf-8">
    <meta name="Pic Change">
    <meta name="keywords" content="face,PES">
    <meta name="author" content="Thalle">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body class="body" style="background-color:#4682B4">
    <script>
    function display(whichimage){
        if(whichimage == 0){    
            document.getElementById('Click').src="C:\.....\Memes\Animals\initial.jpeg"
        }
        else{
            document.getElementById('Click').src="C:\.....\Memes\Animals\Whenlife.jpeg"
        }

    }
    </script>

    <image id="Click" src="C:\......\Memes\Animals\initial.jpg" alt="Click Button to click picture" style="width:300px;height:300px" >

    <p>
    <button type="button" onclick="display(1)">Click!</button>
    <button type="button" onclick="display(0)">Reset</button>
    </p>

</body>
</html>

Answer 1

代码很好，你在开始之前忘了file://。此代码显示，当您在代码中提供工作图像src时，它将正常工作。另外，不要在Stack Overflow上使用磁盘上的文件，它会提供您可能不想在网上获得的私人信息。

<head>
    <title>Pic Change</title>
    <meta charset="utf-8">
    <meta name="Pic Change">
    <meta name="keywords" content="face,PES">
    <meta name="author" content="Thalle">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body class="body" style="background-color:#4682B4">
    <script>
    function display(whichimage){
        if(whichimage == 0){    
            document.getElementById('Click').src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico"
        }
        else{
            document.getElementById('Click').src="https://maxcdn.icons8.com/Share/icon/Animals//duck1600.png"
        }

    }
    </script>

    <image id="Click" src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico" alt="Click Button to click picture" style="width:300px;height:300px" >

    <p>
    <button type="button" onclick="display(1)">Click!</button>
    <button type="button" onclick="display(0)">Reset</button>
    </p>

</body>
</html>

Answer 2

在javascript中，你需要在字符串中转义反斜杠，特别是在地址中。替换所有＆＃34; \＆＃34; by＆＃34; \\＆＃34;。

Answer 3

尝试将您的JavaScript放入<head>部分。然后它可能会工作。

另外。 HTML中没有image这样的东西。这是img。

Answer 4

您不应从磁盘加载图像。我们和其他人都看不到它。如果您使用相对路径并确保每个图像和HTML文件都在同一目录中，那应该没问题。即使这样，您也必须指定file://协议。但是如果你使用网站上的外部图像，我们就可以看到它们。

HTML中有is no <image>个元素。它只是<img>。

您应该输入\\而不是\，因为\字符具有特殊含义。但是，Javascript很聪明，您也可以使用/，不必遵循Windows的方法。

请不要使用onclick属性。它真的很老了。而是使用事件监听器。

现在我不知道你的代码有什么问题，但是，有一个有效的例子：

<!DOCTYPE html>
<html>
    <title>Pic Change</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelector("button").addEventListener("click", function() {
                document.querySelector("img").setAttribute("src", "file://C:/Data/300x300-colored.png");
            });
        });
    </script>
    <p><img src="file://C:/Data/300x300.png" /></p>
    <p><button type="button">Click!</button></p>
</html>

如果两张图片和index.html都位于C:\Data目录中，则效果正常。

Answer 5

您忘记了协议（file://）。它应该像

document.getElementById('Click').src="file://C:\Users...";

否则每次点击按钮时它都会附加到src。

用于更改图像源的Javascript无法正常工作

5 个答案: