JavaScriptを使用して画像のsrcを変更しても、画像は変更されません

-1

画像をクリックすると切り替えが行われます。 JavaScriptはイメージを置き換えるようですが、更新されたイメージは画面に表示されません。ここに私のHTMLコードは次のとおりです。JavaScriptを使用して画像のsrcを変更しても、画像は変更されません

<!DOCTYPE html> 
<html> 
<script src="myscript.js" defer></script> 
<div><img id="light" src="images/light_off.png" width="200px"></div> 
</html>

と私のJavaScriptコード：私は画像をクリックするたびに、アラートがしかし、1と2の間で切り替わりますので

var light_src = document.getElementById('light').src; 

var image = light_src.substring(light_src.lastIndexOf("/")+1); 

light.addEventListener("click", function(){ 
    if (image == "light_off.png"){ 
     alert("1"); 
     light_src = "file:///H:/mydir/images/light_on.png"; 
    } 
    else { 
     alert("2"); 
     light_src = "file:///H:/mydir/images/light_off.png"; 
    } 
});

ソースが変更されているように見えるん、画像は画面上で変化していないように見えます。

私は両方の画像がブラウザのアドレスバーにURLをコピーすることによって動作することを確認しました。

私は間違っていますか？

出典

2017-10-27 kojow7

で.srcを使用することですそこにdownvoteがある理由がありますか？あなたがdownvoteに行く場合は、それがdownvotedされた理由を説明してください。 – kojow7

問題は、要素のソースではなくlight_srcの値を変更していることです。つまり、light_srcはソースのコピーであり、それを変更してもイメージソースは変更されません。

代わりに変数にソースを格納する、あなただけの画像要素を保存する必要があり、このような：

// The image URLs 
const imageOn = 'file:///H:/mydir/images/light_on.png' 
const imageOff = 'file:///H:/mydir/images/light_on.png' 

// Store the image element to use later 
const imageElement = document.getElementById('light') 

// Add the event listener 
imageElement.addEventListener("click", function() { 
    if (imageElement.src === imageOn) { 
    imageElement.src = imageOff 
    console.log('Switched light off') 
    } else { 
    imageElement.src = imageOn 
    console.log('Switched light on') 
    } 
});

出典

2017-10-27 23:15:28 Sidney

いけないセレクタ

var light=document.getElementById('light'); 
 
var image = light.src.substring(light.src.lastIndexOf("/")+1); 
 

 
light.addEventListener("click", function(){ 
 
    if (image == "light_off.png"){ 
 
     console.log(light.src); 
 
     light.src = "file:///H:/mydir/images/light_on.png"; 
 
    } 
 
    else { 
 
     console.log(light.src); 
 
     light.src = "file:///H:/mydir/images/light_off.png"; 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="myscript.js" defer></script> 
 
<div><img id="light" src="images/light_off.png" width="200px" alt="image"></div> 
 
</html>

出典

2017-10-27 23:18:16

JavaScriptを使用して画像のsrcを変更しても、画像は変更されません

答えて

関連する問題