最後の要素でのみ動作する新しいhtml要素にonclickイベントを追加する

Question

ページの下部にページ番号ボタンを作成すると、onclickは作成された最後の要素でしか動作しないという問題があります。ここで

があるページのボタンがどのように見えるか：

for(var i = 0; i < numberOfPages; i++) { 
     if(Math.floor((((startIndex + 1)/10) + 1)) == (i + 1)) { 
      var newElement = document.createElement("u"); 
      document.getElementById("imagesNav").appendChild(newElement); 
      newElement.id = "imagesNavU"; 
      var newElement = document.createElement("a"); 
      document.getElementById("imagesNavU").appendChild(newElement); 
      var str = "page" + (i + 1); 
      newElement.innerHTML = i + 1; 
      newElement.onclick=function(){currentPageNumber(str);}; 
     } else { 
      var newElement = document.createElement("a"); 
      document.getElementById("imagesNav").appendChild(newElement); 
      var str = "page" + (i + 1); 
      newElement.innerHTML = i + 1; 
      newElement.onclick=function(){currentPageNumber(str);};   
     } 
     if(i + 1 != numberOfPages) { 
      document.getElementById("imagesNav").innerHTML += "&nbsp;&nbsp;"; 
     } 
    } 
} 

文はちょうどその要素が現在のページである場合には、下線のタグを置く場合は、最初。

編集：問題は解決されました。皆さん、ありがとうございました！

Answer 1

問題は、ループのこの部分である：

if(i + 1 != numberOfPages) { 
     document.getElementById("imagesNav").innerHTML += "  "; 
    } 

これはimagesNav要素内のすべてのHTMLを再解析しています。これにより、新規の<a>要素が作成されます。これには、前の要素と同じバインディングがonclickありません。

代わりに、スペースを含む<span>要素を追加できます。

var numberOfPages = 3; 
 
var startIndex = 0; 
 

 
for (var i = 0; i < numberOfPages; i++) { 
 
    if (Math.floor((((startIndex + 1)/10) + 1)) == (i + 1)) { 
 
    var newElement = document.createElement("u"); 
 
    document.getElementById("imagesNav").appendChild(newElement); 
 
    newElement.id = "imagesNavU"; 
 
    var newElement = document.createElement("a"); 
 
    document.getElementById("imagesNavU").appendChild(newElement); 
 
    var str = "page" + (i + 1); 
 
    newElement.innerHTML = i + 1; 
 
    newElement.onclick = function() { 
 
     currentPageNumber(str); 
 
    }; 
 
    } else { 
 
    var newElement = document.createElement("a"); 
 
    document.getElementById("imagesNav").appendChild(newElement); 
 
    var str = "page" + (i + 1); 
 
    newElement.innerHTML = i + 1; 
 
    newElement.onclick = function() { 
 
     currentPageNumber(str); 
 
    }; 
 
    } 
 
    if (i + 1 != numberOfPages) { 
 
    var span = document.createElement('span'); 
 
    span.innerHTML = '&nbsp;&nbsp;'; 
 
    document.getElementById("imagesNav").appendChild(span); 
 
    } 
 
} 
 

 
function currentPageNumber(str) { 
 
    alert(str); 
 
}

<div id="imagesNav"> 
 

 
</div>

それを行うための別の方法はそれですでに何再解析せずに要素にHTMLを追加した、insertAdjacentHTMLです。

document.getElementById("imagesNav").insertAdjacentHTML('beforeend', '  '); 

あなたがstr変数を使用している方法は、すべてのクリックハンドラは、ループの最後の繰り返しの値を使用しますので、あなたもJavaScript closure inside loops – simple practical exampleが表示されるはずです。