不明白为什么我的JavaScript功能不起作用？

问题描述：

我正在尝试使用一些简单的Javascript函数，以便在按下按钮时将<img>的源代码更改为另一张图片。不明白为什么我的JavaScript功能不起作用？

然而，没有任何按钮，似乎工作，即使是最后一个没有我做只是为了测试我是否会得到一个警告。

我试图搞清楚什么是错的，但我似乎无法找到它。我已经寻找类似的问题和线程，但从来没有解决方案应用到我的情况......

谢谢。（我只贴标签<body></body>因为没有什么特殊的<head>和合作。标签）

<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">

后宣布有一个语法错误 - 删除设置新来源的行尾的所有'>'。 – Archer

确实。你也应该在你的控制台出现错误 - 不要忽略这些错误！ – nadavvadan

答

你“>”字在你的src定义在你的JavaScript功能，最终导致错误。例如：

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";

做同样的代码中的每一个功能。它绝对有效

答

您的代码中有语法错误。要删除这>;需求。否则你的src是无效的。看下面的代码片段，看看你的方法是好的。

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"); 
 
    };

<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">

答

的问题是1。 '>' 必须像网址后去除 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>

不明白为什么我的JavaScript功能不起作用？

相关推荐