Изменение отдельных изображений по одному с onlick

Question

Я кодировал около двух недель. В настоящее время я пытаюсь использовать JavaScript для создания страницы с несколькими файлами изображений, которые я хочу изменить индивидуально и отдельно, когда я нажимаю на них. Лучший способ описать это, если вы можете представить набор игровых карт лицом вниз, и я хочу, чтобы иметь возможность щелкнуть каждый из них и изменить его на другое изображение, а также иметь возможность снова щелкнуть, чтобы изменить назад ,

См. Приведенный ниже код JavaScript и код. Скрипт работает на моем первом изображении, но не на каких-либо других изображениях. Любая помощь будет принята с благодарностью.

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

опечатка @onlick, это 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)" /> 

Я использовал атрибут альт-SRC для хранения другого изображения на it.When мыши на любом image.It свопа с СРК альт-Src.