不明白爲什麼我的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">

來源

2017-08-07 Disjoint

後宣佈有一個語法錯誤 - 刪除設置新來源的行尾的所有'>'。 – 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";

做同樣的代碼中的每一個功能。它絕對有效

來源

2017-08-07 08:26:18

您的代碼中有語法錯誤。要刪除這>;需求。否則你的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">

來源

2017-08-07 08:49:44

的問題是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>

來源

2017-08-07 09:35:29

不明白爲什麼我的JavaScript功能不起作用？

回答

相關問題