Сделайте новое изображение, нажав на предыдущее изображение

Question

Я хочу написать код, в котором при нажатии на изображение появляется другое изображение. После этого, когда вы нажмете на новое изображение, появится другой, и так далее.

Я написал этот код, который работает для первого изображения. Я не могу понять, как определить отображаемые изображения в качестве входных данных.

var i = 1 
 

 
function addimage() { 
 
    var img = document.createElement("img"); 
 
    img.src = "images/d" + i + ".jpg"; 
 
    document.body.appendChild(img); 
 
} 
 

 
function counter() { 
 
    i = i + 1 
 
}

<input type="image" src="images/d1.jpg" onclick="addimage(); counter();">

Answer 1

Прикрепите onclick функцию к новому образу, с тем же кодом, что и в вашем input тег:

var i = 1 
 

 
function imageClick() { 
 
    if (! this.alreadyClicked) 
 
    { 
 
    addimage(); 
 
    counter(); 
 
    this.alreadyClicked = true; 
 
    } 
 
} 
 

 
function addimage() { 
 
    var img = document.createElement("img"); 
 
    img.src = "http://placehold.it/" + (200 + i); 
 
    img.onclick = imageClick; 
 
    document.body.appendChild(img); 
 
} 
 

 
function counter() { 
 
    i = i + 1 
 
}

<input type="image" src="http://placehold.it/200" onclick="imageClick();">

Answer 2

Чтобы добавить обработчик событий к элементу существует три метода; используйте только один из них:

=> С атрибутом HTML. Я бы не рекомендовал этот метод, потому что он смешивает JS с HTML и не является практичным в долгосрочной перспективе.

<img id="firstImage" src="something.png" onclick="myListener(event);" /> 

=> С атрибутом элемента в JS. Это работает только в том случае, если у вас есть одно событие для привязки к этому элементу, поэтому я не использую его.

var firstImage = document.getElementById('firstImage'); 
firstImage.onclick = myListener; 

=> Связывая его с JavaScript. Этот метод был стандартизирован и работает во всех браузерах с IE9, поэтому нет причин не использовать его больше.

var firstImage = document.getElementById('firstImage'); 
firstImage.addEventListener("click", myListener); 

Конечно же, myListener должна быть функция, и она получит это событие в качестве первого аргумента.

В вашем случае вы, вероятно, не хотите добавлять другое изображение, когда вы нажимаете на любое изображение, которое в настоящее время не является последним. Поэтому, когда пользователь нажимает на последнее изображение, вы хотите добавить новое изображение и прекратить прослушивание кликов на текущем.

var i = 1; 

function addNextImage(e) { 
    // remove the listener from the current image 
    e.target.removeEventListener("click", addNextImage); 

    // create a new image and bind the listener to it 
    var img = document.createElement("img"); 
    img.src = "http://placehold.it/" + (200 + i); 
    img.addEventListener("click", addNextImage); 
    document.body.appendChild(img); 

    // increment the counter variable 
    i = i + 1; 
} 

var firstImage = document.getElementById("firstImage"); 
firstImage.addEventListener("click", addNextImage); 

Try on JSFiddle

---

На стороне записки: в то время как JavaScript делает поддержку опуская некоторые полуколоннами это считается лучшей практикой, чтобы положить их, и это позволит избежать мелких ошибок.