document.getElementById（'rockImg'）。src ==「rock.png」在if（）塊中似乎不會被執行

我剛開始學習javascript。我想要做的下面的代碼是切換兩個圖像，因爲我點擊圖像編號rockImg。document.getElementById（'rockImg'）。src ==「rock.png」在if（）塊中似乎不會被執行

我用document.getElementById('rockImg').src = "rock_happy.png"的單個語句成功地將其中一個更改爲另一個;但不能通過單擊圖像來交換兩個圖像。

AFAIK，if-else語句的語法沒有任何錯誤;爲了確保，我提到了這個網站：https://msdn.microsoft.com/en-us/library/85yyde5c(v=vs.94).aspx。

比較聲明是否存在問題？因爲它僅在ocument.getElementById('rockImg').src = "rock_happy.png"運行時才能正常工作，這是我能想到的唯一情況。

<html> 
<head> 
    <title>iRock - The Virtual Pet Rock</title> 
    <script> 
    function change(){ 
     // alert('yay! it changed!') 
     if(document.getElementById('rockImg').src == 'rock.png'){ 
      document.getElementById('rockImg').src = "rock_happy.png"; 
     } 
     else{ 
      document.getElementById('rockImg').src = "rock.png"; 
     } 
    } 
    </script> 
</head> 

<body> 
    <div style="margin-top:100px; text-align:center;"> 
     <img id="rockImg" src="rock.png" alt="iRock" onclick="change()"/> 
    </div> 
</body>

來源

2016-12-26 Yeongchan Jeon

+兩個圖像名稱都是正確的！ –

分享你的作品的一個小提琴，其他人很容易看到發生了什麼 – baig772

src屬性總是返回整個圖像的URL，而不是相對路徑，以便如果條件總是失敗。

使用setAttribute和getAttribute，而不是得到確切的屬性值

function change(){ 
    var img = document.getElementById('rockImg'); 
    if(img.getAttribute('src') == 'rock.png'){ 
     img.setAttribute('src', "rock_happy.png"); 
    } 
    else{ 
     img.setAttribute('src', "rock.png"); 
    } 
}

您可以通過使用ternary operator代替if...else陳述減少代碼的行數。

function change(){ 
    var img = document.getElementById('rockImg'); 
    img.setAttribute('src',img.getAttribute('src') == 'rock.png' ? "rock_happy.png" : "rock.png"); 
}

來源

2016-12-26 06:02:31

document.getElementById（'rockImg'）。src ==「rock.png」在if（）塊中似乎不會被執行

回答

相關問題