使用onclick

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)" />

我使用alt-src属性在其上存储其他图像。当点击任何图像时。它将src与alt-src交换。