索引错误的JavaScript

pprl5pva  于 2022-12-21  发布在  Java
关注(0)|答案(6)|浏览(170)

当我点击“改变灯光”按钮时,我必须点击两次才能改变图片。可能出了什么问题?有什么想法吗?
下面是我的HTML:

<p>Click the button to change to the next light.</p>

<img id="starting_light" src="green.jpg">

<button type="button" onclick="nextLightClick()">Change</button>

还有我的JavaScript:

var gyr = new Array("green.jpg","yellow.jpg","red.jpg");

var index = 0;
var gyrLen = gyr.length;

function nextLightClick() {
    if (index == gyrLen) 
        index = 0;

    var image = document.getElementById('starting_light');
    image.src = gyr[index];

    index++;
}

我怀疑主要的问题出在JavaScript中,因为一旦我开始摆弄变量,这个问题就被引入了。

aamkag61

aamkag611#

第一次运行时,图像为绿色。
然后将图像设置为绿色图像gyr[0],然后递增索引。
您可以在设置图像之前递增索引,也可以重新排序数组以使绿色位于最后。

aurhwmvo

aurhwmvo2#

第一次单击按钮时,index等于0,因此nextLightClick()将image.src设置为“green. jpg”,这与起始图像相同(假设“1green. jpg”是一个打字错误)。
解决方法是将index++移到nextLightClick()的第一行。

yvgpqqbh

yvgpqqbh3#

第一次进入函数并设置图像时,索引仍为0。
移动索引++;返回到函数的开头,或者将索引初始化为值1。

var index = 1;

如果您想将索引初始化为1,那么您应该将变量重命名为nextIndex之类的名称。

kdfy810k

kdfy810k4#

我不认为是这样的。你的代码工作正常。你的第一张图片是绿色的,当你第一次点击的时候,你用第一张图片替换了它,这就是为什么你看不到任何区别的原因。
您可以考虑这样做:

var gyr = new Array("http://i.imgur.com/eucAMTA.jpg", "http://is2.mzstatic.com/image/thumb/Purple122/v4/be/9a/f0/be9af074-90f2-5894-99a0-17460783db6c/source/1200x630bf.jpg", "https://i0.wp.com/fusion.net/wp-content/uploads/2016/05/RED.jpg?resize=1600%2C900&quality=80&strip=all");


var index = 0;
var gyrLen = gyr.length;

function nextLightClick() {
   index++;
  // alert("hello" + index);
  if (index == gyrLen)
    index = 0;

  var image = document.getElementById('starting_light');
  image.src = gyr[index];

 
}
img {
  width: 200px;
  height: 200px;
}
p>Click the button to change to the next light.</p>

<img id="starting_light" src="http://i.imgur.com/eucAMTA.jpg">

<button type="button" onclick="nextLightClick()">Change</button>
igetnqfo

igetnqfo5#

啊,我似乎已经找到了答案,多亏了扎克和美国人,问题是索引应该在“nextlightclick”的第一行
修复以下脚本:

<p>Click the button to change to the next light.</p>

<img id="starting_light" src="green.jpg">

<button type="button" onclick="nextLightClick()">Change lights</button>

<script>

var gyr = new Array("green.jpg","yellow.jpg","red.jpg");


var index = 0;
var gyrLen = gyr.length;

function nextLightClick() {
    index++;
    if (index == gyrLen) 
        index = 0;

    var image = document.getElementById('starting_light');
    image.src = gyr[index];
}

</script>

</body>
</html>
vaqhlq81

vaqhlq816#

index更新逻辑有一个小问题。你必须评估它的值,如果它小于gry.length,再加上一个,重新初始化为0。
内部脚本代码:

var gyr = new Array("green.jpg","yellow.jpg","red.jpg");
var index = 0;

function nextLightClick() {
    index = index + 1 < gyr.length ? index + 1 : 0;
    document.getElementById('starting_light').alt = gyr[index];
}

相关问题