#javascript #html #function
Вопрос:
У меня есть функция, которая продолжается на один шаг дольше, чем необходимо. При нажатии на изображение (elefant.png) изображение (scale1.png) изменяется. Есть 5 картинок, и это прекрасно работает. Проблема в том, что когда отображается последнее изображение и я снова нажимаю (elefant.png), появляется неопределенное изображение? Я не понимаю, почему он просто не останавливается на последней картинке (масштаб 5.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>
Это может быть простым решением, но я плохо разбираюсь в javascript. Я попытался найти ответ, но я не уверен, что даже искать, так как я не знаю, в чем причина проблемы?
Ответ №1:
Я не совсем уверен, каким должен быть ваш конечный результат, как только вы достигнете конца массива галереи, но в нынешнем виде он меняет title_text на «Новый текст!».
Проблема с вашим кодом в его нынешнем виде заключается в том, что вы всегда увеличиваете счетчик и изменяете исходное значение getImage на основе этого целого числа. Это не прекратится, как только ваш счетчик достигнет 4.
Я бы использовал длину массива в качестве точки остановки и увеличивал переменную счетчика только до тех пор, пока не будет достигнут этот предел. Я бы написал что-то вроде этого:
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>
Ответ №2:
Вы всегда запускаете функцию и меняете источник изображения, и только затем проверяете counter
его значение. Вот почему он будет продолжать работать и изменять источник, даже если счетчик больше 3.
Решением было бы изменить counter
значение s условно:
if (counter < gallery.length - 1) {
counter ;
}