Почему я получаю ту же строку на событие и решение onClick?

Почему я получаю ту же строку onClick событие и решение?

Переменные, объявленные с помощью var , не создают никакой области видимости в JavaScript. В результате, когда функция обработчика щелчка вызывается в первый раз, i представляет последнее значение итерации.

priceBookHeading переменную цикла i и priceBookHeading с помощью let которая объявляет локальную переменную области видимости блока.

Кроме того, в вашем коде вы не добавляете динамически созданный элемент в DOM ( box2 ).

Обратите внимание: поскольку элемент не содержит htmlString, вместо innerHTML лучше использовать textContent или innerText для установки / получения значения элемента.

 var images = ["BookImagesLookImage_1.jpg", "BookImagesLookImage_2.jpg", "BookImagesLookImage_3.jpg", "BookImagesLookImage_4.jpg", "BookImagesLookImage_5.jpg", "BookImagesLookImage_5.jpg"]; var price=["3$", "4$", "5$", "6$", "7$", "8$"] var description= ["The magic of Thinking Big", "It's never too late to begin again", "The power of your potential", "Self Esteem", "Your Worst Enemy", "Your Worst Enemy"]; function myBooks(){ var box2 = document.querySelector("#fourthPage"); box2.innerText = ""; var creatediv = document.createElement("div"); creatediv.id="Create-Div"; var createList = document.createElement("ul"); createList.class="List-Group"; creatediv.appendChild(createList); for(let i=0; i{amp}lt; images.length; i  ){ var unamedTag = document.createElement("li"); unamedTag.class = "list-group-item"; createList.appendChild(unamedTag); let priceBookHeading= document.createElement("H6"); //Declare this with let priceBookHeading.class="Books"; priceBookHeading.textContent = description[i]   ' '   price[i]; unamedTag.appendChild(priceBookHeading); var cartButton = document.createElement("button"); cartButton.textContent = 'Button-'   (i 1); // You can also add some text to the button cartButton.class = "cast-class"; unamedTag.appendChild(cartButton); cartButton.onclick = function(){ console.log("Printing book to add: "   priceBookHeading.textContent); }; box2.appendChild(unamedTag); // Append the element to box2 } } myBooks(); 
 {amp}lt;div id="fourthPage"{amp}gt;{amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector