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

Question

var images = ["BookImages\\LookImage_1.jpg", "BookImages\\LookImage_2.jpg", "BookImages\\LookImage_3.jpg", "BookImages\\LookImage_4.jpg", "BookImages\\LookImage_5.jpg", "BookImages\\LookImage_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);
    //console.log("Create Div" + document.getElementById("creatediv"))

    for(i=0; i< images.length; i++)
    {
    var unamedTag = document.createElement("li");
    unamedTag.class = "list-group-item";

    createList.appendChild( unamedTag);

    var priceBookHeading= document.createElement("H6");
    priceBookHeading.class="Books";
    priceBookHeading.innerHTML= description[i] + '   '   + price[i];
    unamedTag.appendChild(priceBookHeading);
    //console.log("Printing book to Ria add: " + priceBookHeading.innerHTML);  
    var cartButton = document.createElement("button");
    cartButton.class = "cast-class";
    unamedTag.appendChild(cartButton);
    cartButton.onclick = function(){
     console.log("Printing book to add: " + priceBookHeading.innerHTML);
    } 

Answer 1

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

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

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

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

var images = ["BookImages\LookImage_1.jpg", "BookImages\LookImage_2.jpg", "BookImages\LookImage_3.jpg", "BookImages\LookImage_4.jpg", "BookImages\LookImage_5.jpg", "BookImages\LookImage_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< 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();

<div id="fourthPage"></div>

Answer 2

Вы получаете ту же строку, потому что вы берете закрытие priceBookHeading, которое определено в области действия функции myFunction.

Чтобы решить эту проблему, вам нужно объявить свою переменнуюиспользование ключевого слова let внутри области видимости заблокированного цикла.

См. ниже фрагмент

for (i = 0; i < images.length; i++) {
  var unamedTag = document.createElement("li");
  unamedTag.class = "list-group-item";

  createList.appendChild(unamedTag);

  let priceBookHeading = document.createElement("H6"); // declared with let it will create blocked scope
  priceBookHeading.class = "Books";
  priceBookHeading.innerHTML = description[i] + '   ' + price[i];
  unamedTag.appendChild(priceBookHeading);
  //console.log("Printing book to Ria add: " + priceBookHeading.innerHTML);  
  var cartButton = document.createElement("button");
  cartButton.class = "cast-class";
  unamedTag.appendChild(cartButton);
  cartButton.onclick = function () {
    console.log("Printing book to add: " + priceBookHeading.innerHTML);
  }
}

Приведенный выше фрагмент решит вашу проблему

Для получения дополнительной информации о блокированной области см. это .