Question

我遇到一个函数问题，当我点击它直接从第一张图像传递到最后一张图像的按钮时，该功能会改变图像。我的代码出了什么问题？

＆＃13;

<script language="javascript">
    function changeImage() {

        if (document.getElementById("image").src == "1.jpg") 
        {
            document.getElementById("image").src = "2.jpg";
        }
        else   if (document.getElementById("image").src == "2.jpg") 
        {
            document.getElementById("image").src = "3.jpg";
        }
		

    }
</script>

＆＃13;

Answer 1

访问DOMNode.src将返回图片的完整路径：

var img = document.createElement('img');
img.src = 'a.png';
console.log(img.src); // https://example.com/a.png
console.log(img.getAttribute('src')) // a.png

您的changeImage功能可以改写为：

function changeImage() {
    var image = document.getElementById("image");
    var src = image.getAttribute('src');
    if (src == "1.jpg") {
        image.src = "2.jpg";
    }
    else if (src == "2.jpg") {
        image.src = "3.jpg";
    }
}

Answer 2

也许你应该使用这样的东西：

function changeImage() {
  var image = document.getElementById("image");
  var src = image.getAttribute("src");

  if (src === "1.jpg") {
    image.src = "2.jpg";
  } else if (src === "2.jpg") {
    image.src = "3.jpg";
  }     
}

如果有效，请给我一个喊叫。

Answer 3

＆＃13;

<html>
<head>

<script language="javascript">
    function changeImage() {

        if (document.getElementById("image").src == "1.jpg") 
        {
            document.getElementById("image").src = "2.jpg";
        }
        else   (document.getElementById("image").src == "2.jpg") 
        {
            document.getElementById("image").src = "3.jpg";
        }
		

    }
</script>
</head>
<body>
<img id="image" src="1.jpg" ><br><br></img>
<button id="clickme" onclick="changeImage();"> : pass </button>

</body>
</html>

＆＃13;

javascript function changeimage（）

3 个答案: