onclick函數不執行以改變圖像

在下面的codepen中，我試圖用JavaScript改變圖像的id =「chrome」，但它似乎沒有做任何事情。我做錯了什麼，如何解決。先進的謝謝你。onclick函數不執行以改變圖像

第一張圖片的ID爲chrome，點擊時我試圖更改圖片。

這裏是我使用的JS。

function changeImage() { 

    if (document.getElementById("chrome").src == "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png") 
    { 
     document.getElementById("chrome").src = "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png"; 
    } 
    else 
    { 
     document.getElementById("chrome").src = "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"; 
    } 
}

基本上，對於有鉻圖標的第一行，我想在點擊後將其更改爲x圖像。

來源

2017-06-03 martinbshp

變化<img onclick()="changeImage()">到<img onclick="changeImage()">

來源

2017-06-03 15:31:42

謝謝。這工作。 – martinbshp

首先，改變<img onclick()="changeImage()"到<img onclick="changeImage()"。如果您想爲多個用戶執行此操作，那麼這並不能解決您的問題，因爲每個chrome圖像都需要自己的ID才能使用多個徽標。

來源

2017-06-03 15:34:31 Luca

-1

您的HTML代碼中有語法錯誤。 onclick不是一個函數，它是一個HTML屬性，因此您不要將它稱爲函數，只需在其中添加括號即可。

您只能以onclick屬性的值爲準，即JavaScript語法。

正確的代碼是：

<img onclick="changeImage()">

這裏是你的代碼筆的工作版本：https://codepen.io/pahund/pen/XgWVQx

來源

2017-06-03 15:35:05

你有一個錯字。當定義你寫一個內聯onclick：

<div onclick()="changeImage()"></div>

它應該是：

<div onclick="changeImage()"></div>

看看下面片斷：

function changeImage() { 
 

 
     if (document.getElementById("chrome").src == "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png") 
 
     { 
 
      document.getElementById("chrome").src = "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png"; 
 
     } 
 
     else 
 
     { 
 
      document.getElementById("chrome").src = "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"; 
 
     } 
 
    }

img { 
 
\t \t \t height: 25px; 
 
     padding-right: 4px; 
 
\t \t } 
 
\t \t li { 
 
\t \t \t margin: 4px; 
 
     clear: both; 
 
\t \t } 
 
\t \t li:nth-child(odd) { 
 
\t \t \t background: #f0f0f5; 
 
\t \t }

<ul class="list-unstyled"> 
 
\t \t \t \t <li>Username<span class="pull-right"> 
 
      <img onclick="changeImage()" id ="chrome" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img id="firefox" src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"> 
 
      <img id="ie" src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li> 
 
\t \t \t \t 
 
\t \t \t </ul>

來源

2017-06-03 15:35:33

的onclic相反K（）= 「changeImage（）」; ....使用的onclick = 「changeImage（）」 .....刪除「（）」托架中的onclick功能

來源

2017-06-03 15:37:57 Ashwin

onclick函數不執行以改變圖像

回答

相關問題