Question

我正在尝试使用一些简单的Javascript函数，在按下按钮时将<img>的源代码更改为另一张图片。

然而，没有一个按钮似乎工作，甚至没有我做的最后一个测试是否会得到警报。

我试图弄清楚出了什么问题，但我似乎无法找到它。我已经搜索了类似的问题和线程，但解决方案从未适用于我的案例...

谢谢。（我只发布了<body></body>代码，因为<head>和co。代码中没有任何特殊内容。

<script type="text/javascript">

    function myFunctionMice() {
        document.getElementById("target").src = "http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png">;
    };

    function myFunctionLaser() {
        document.getElementById("target").src = "http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png" >;
    };

    function myFunctionBirds() {
        document.getElementById("target").src = "http://image.flaticon.com/icons/png/512/47/47080.png">;
    };

    function myTry() {
        alert("example");
    };

</script>    

<h1 align="center">Web4Cats</h1>

<nav>
    <button type="button" onclick="myFunctionBirds()">Birds</button>
    <button type="button" onclick="myFunctionMice()">Mice</button>
    <button type="button" onclick="myFunctionLaser()">Laser</button>
    <button type="button" onclick="myTry()">Try</button>
</nav>

<img id="target" src="http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png">

Answer 1

您的代码中存在语法错误。需要删除此>;。否则你的src无效。请查看下面的代码段，看看您的方法是否合适。

＆＃13;

    function myFunctionMice() {
        document.getElementById("target").src = "http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png"
    };

    function myFunctionLaser() {
        document.getElementById("target").src = "http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png" 
    };

    function myFunctionBirds() {
        document.getElementById("target").src = "http://image.flaticon.com/icons/png/512/47/47080.png"
    };

    function myTry() {
        alert("example");
    };

＆＃13;

<h1 align="center">Web4Cats</h1>

<nav>
    <button type="button" onclick="myFunctionBirds()">Birds</button>
    <button type="button" onclick="myFunctionMice()">Mice</button>
    <button type="button" onclick="myFunctionLaser()">Laser</button>
    <button type="button" onclick="myTry()">Try</button>
</nav>

<img id="target" src="http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png">

＆＃13;

Answer 2

问题是1。＆＃39;＆gt;＆＃39;必须在图片网址后删除 2.你的javascript代码必须在html代码之后声明

            <h1 align="center">Web4Cats</h1>

            <nav>
                <button type="button" onclick="myFunctionBirds()">Birds</button>
                <button type="button" onclick="myFunctionMice()">Mice</button>
                <button type="button" onclick="myFunctionLaser()">Laser</button>
                <button type="button" onclick="myTry()">Try</button>
            </nav>
            <img id="target" src="http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png">

<script>
        function myFunctionMice() {
               document.getElementById("target").src = "http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png"
};
        function myFunctionLaser() {
               document.getElementById("target").src = "http://www.clker.com/cliparts/b/Z/f/0/p/W/mouse-with-smaller-ears-md.png" 
};
        function myFunctionBirds() {
               document.getElementById("target").src = "http://image.flaticon.com/icons/png/512/47/47080.png"
};
        function myTry() {
               alert("example");
         };  
</script>

Answer 3

你的'＆gt;'字符在javascript函数的src定义结尾处导致错误。例如：

 document.getElementById("target").src = "http://image.flaticon.com/icons/png/512/47/47080.png" **>** ;

应该是：

document.getElementById("target").src = "http://image.flaticon.com/icons/png/512/47/47080.png";

对代码中的每个函数执行相同操作。它肯定有效

无法理解为什么我的Javascript函数不起作用？

3 个答案: