Javascript 函数比需要的时间长了一步

Question

I have a function that continues one step longer than needed.我有一个功能比需要的时间长一步。 When the image (elefant.png) is clicked the image (scale1.png) is changed.单击图像 (elefant.png) 时，图像 (scale1.png) 会更改。 There are 5 pictures and it works fine.有5张图片，效果很好。 Problem is that when the last picture is displayed, and I click (elefant.png) again it comes to an undefined picture?问题是当显示最后一张图片时，我再次单击（elefant.png）它会出现未定义的图片？ I don't understand why it doesn't just stop on the last picture (scale5.png)?我不明白为什么它不只是停在最后一张图片（scale5.png）上？

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="style.css">
  <body>

    <div class="wrapper1">

      <h2 id="title_text">Hey</h2>

        <img src="image/scale1.png" id="getImage">

        <img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()">



    </div>

    <script type="text/javascript">

        var counter = 0,
    gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"],
    imagefun = function () {
        document.getElementById("getImage").src = gallery[counter];
        counter++;
        if (counter >= 4) {
            document.getElementById("title_text").innerHTML = "New text!";
        }

    };

    </script>


  </body>
</html>

This might be an easy fix, but I am not good with javascript.这可能是一个简单的解决方法，但我不擅长 javascript。 I tried searching for an answer but I'm not sure what to even look for as I don't know what causes the issue?我试图寻找答案，但我不确定要寻找什么，因为我不知道是什么导致了问题？

Answer 1

I'm not exactly sure what your end result should be once you hit the end of your gallery array but as it stands it changes title_text to "New text!".我不确定一旦你到达画廊数组的末尾，你的最终结果应该是什么，但就目前而言，它会将 title_text 更改为“新文本！”。

The problem with your code as it stands is you always increment counter and change the source getImage based on that integer.您的代码的问题在于您总是增加计数器并根据该整数更改源 getImage 。 That doesn't stop once your counter hits 4.一旦您的计数器达到 4，这不会停止。

I'd use the array length as a stopping point and only increment the counter variable up until that limit is hit.我将使用数组长度作为停止点，并且只增加计数器变量直到达到该限制。 I would write something like this:我会写这样的东西：

 var counter = 0, gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"], imagefun = function () { if (counter >= gallery.length) { document.getElementById("title_text").innerHTML = "New text!"; } else{ document.getElementById("getImage").src = gallery[counter]; counter++; } };

 <div class="wrapper1"> <h2 id="title_text">Hey</h2> <img src="image/scale1.png" id="getImage"> <img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()"> </div>

Answer 2

You always run the function and change the image source, and only then check for counter 's value.您始终运行该函数并更改图像源，然后才检查counter的值。 That's why it'll keep going and changing the source even when counter is bigger than 3.这就是为什么即使计数器大于 3 它也会继续前进并更改源的原因。

A solution would be to change counter ' s value conditionally:一个解决方案是有条件地改变counter的值：

if (counter < gallery.length - 1) {
  counter++;
}

Javascript 函数比需要的时间长了一步

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-10-18 09:11:31

解决方案2
0 2021-10-18 09:03:19

Javascript 函数比需要的时间长了一步

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-10-18 09:11:31

解决方案2 0 2021-10-18 09:03:19

解决方案1
1 已采纳 2021-10-18 09:11:31

解决方案2
0 2021-10-18 09:03:19