通過點擊前一張圖片顯示一個新圖像

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並支持省略一些半支柱它被認爲是一個更好的做法是把他們，這將避免小錯誤。