Einzelne Bilder einzeln mit

Question

ändern Ich habe seit etwa zwei Wochen codiert. Ich versuche derzeit, JavaScript zu verwenden, um eine Seite mit mehreren Bilddateien zu erstellen, die ich einzeln und separat ändern möchte, wenn ich darauf klicke. Der beste Weg, um es zu beschreiben, ist, wenn Sie sich eine Reihe von Spielkarten verdeckt vorstellen können, und ich möchte in der Lage sein, auf jedes einzelne zu klicken und es zu einem anderen Bild wechseln zu lassen und wieder klicken zu können, um es wieder zu ändern .

Bitte beachten Sie JavaScript und Code unten, dass ich bis jetzt getan habe. Das Skript funktioniert auf meinem ersten Bild, aber nicht auf weiteren Bildern. Jede Hilfe würde sehr geschätzt werden.

HTML:

<img id="imgOne" onclick="changeImageOne()" src="click_here.png" height="100" width="100"> 
<img id="imgTwo" onlick="changeImageTwo()" src="click_here.png" height="100" width="100"> 

JavaScript:

var changeImageOne = function() { 
    var imageOne = document.getElementById('imgOne'); 
    if (imageOne.src.match("i.jpg")) { 
    imageOne.src = "click_here.png"; 
    } else { 
    imageOne.src = "i.jpg"; 
    } 
} 
var changeImageTwo = function() { 
    var imageTwo = document.getElementById('imgTwo'); 
    if (imageTwo.src.match("l.jpg")) { 
    imageTwo.src = "click_here.png"; 
    } else { 
    imageTwo.src = "l.jpg"; 
    } 
} 

Answer 1

Typo @onlick, es ist onclick

var changeImageOne = function() { 
 
    var imageOne = document.getElementById('imgOne'); 
 
    if (imageOne.src.match("i.jpg")) { 
 
    imageOne.src = "click_here.png"; 
 
    } else { 
 
    imageOne.src = "i.jpg"; 
 
    } 
 
    alert(imageOne.src); 
 
} 
 
var changeImageTwo = function() { 
 
    var imageTwo = document.getElementById('imgTwo'); 
 
    if (imageTwo.src.match("l.jpg")) { 
 
    imageTwo.src = "click_here.png"; 
 
    } else { 
 
    imageTwo.src = "l.jpg"; 
 
    } 
 
    alert(imageTwo.src); 
 
}

<img id="imgOne" onclick="changeImageOne()" src="click_here.png" height="100" width="100"> 
 
<img id="imgTwo" onclick="changeImageTwo()" src="click_here.png" height="100" width="100">

Answer 2

JavaScript:

<script> 
function SWAPImage(idv,oldimg,newimg){ 
    document.getElementById(idv).attributes.src.value=newimg; 
    document.getElementById(idv).attributes["alt-src"].value = oldimg; 
} 
</script> 

HTML:

<img class="image" src="a.jpg" alt-src="a_other.jpg" id="img1" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" /> 
<img class="image" src="b.jpg" alt-src="b_other.jpg" id="img2" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" /> 
<img class="image" src="c.jpg" alt-src="c_other.jpg" id="img3" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" /> 

ich alt-Attribut src verwendet, um anderes Bild zu speichern auf it.When auf beliebigen image.It Swap-src mit alt-src.