我试图更改数组中每个项目的“值”，但每次发生此错误时“无法设置未定义的属性‘innerHTML’”

Question

我正在尝试更改创建的元素上的值，并使工作更简单，我为它们提供了类，以便稍后可以轻松地将其内容更改为数组，但当我尝试时根本不起作用    let div_section = document.createElement('div');    for (i = 0; i < 2; i++) {        let section_boxes = document.createElement('section');        section_boxes +1;        section_boxes.setAttribute('class','box');        div_section.appendChild(section_boxes);            let boxes_h2 = document.createElement('h2');        boxes_h2 +1;        boxes_h2.setAttribute('class','boxesTitle');        section_boxes.appendChild(boxes_h2);        let boxes_p = document.createElement('p');        boxes_p +1;        boxes_p.setAttribute('class','boxesP');        section_boxes.appendChild(boxes_p);             };    //Grabing classes    let getBoxes = document.getElementsByClassName('box');    let getTitle = document.getElementsByClassName('boxesTitle');    let getText = document.getElementsByClassName('boxesP');        //Don't know why doesn't work     getText[0].innerHTML = "Some Random text";    getTitle[0].innerHTML = "Title";    for(i = 0; i < getBoxes.length; i++){        getBoxes[i].style.backgroundColor = "#947062";    };

Answer 1

你忘了附加正文，这就是原因

  let div_section = document.createElement("div");

  for (i = 0; i < 2; i++) {

    let section_boxes = document.createElement("section");

    section_boxes + 1;

    section_boxes.setAttribute("class", "box");

    div_section.appendChild(section_boxes);

    let boxes_h2 = document.createElement("h2");

    boxes_h2 + 1;

    boxes_h2.setAttribute("class", "boxesTitle");

    section_boxes.appendChild(boxes_h2);

    let boxes_p = document.createElement("p");

    boxes_p + 1;

    boxes_p.setAttribute("class", "boxesP");

    section_boxes.appendChild(boxes_p);

  }

  // addedline of code added

  document.body.append(div_section);

  //Grabing classes

  let getBoxes = document.getElementsByClassName("box");

  let getTitle = document.getElementsByClassName("boxesTitle");

  let getText = document.getElementsByClassName("boxesP");

  //Don't know why doesn't work

  getText[0].innerHTML = "Some Random text";

  getTitle[0].innerHTML = "Title";

  for (i = 0; i < getBoxes.length; i++) {

    getBoxes[i].style.backgroundColor = "#947062";

  }

Answer 2

您不添加div_section到文档 DOM。

let div_section = document.createElement('div');

// This was missing

document.body.appendChild(div_section);

for (i = 0; i < 2; i++) {

    let section_boxes = document.createElement('section');

    section_boxes +1;

    section_boxes.setAttribute('class','box');

    div_section.appendChild(section_boxes);

    let boxes_h2 = document.createElement('h2');

    boxes_h2 +1;

    boxes_h2.setAttribute('class','boxesTitle');

    section_boxes.appendChild(boxes_h2);

    let boxes_p = document.createElement('p');

    boxes_p +1;

    boxes_p.setAttribute('class','boxesP');

    section_boxes.appendChild(boxes_p); 

    

};

//Grabing classes

let getBoxes = document.getElementsByClassName('box');

let getTitle = document.getElementsByClassName('boxesTitle');

let getText = document.getElementsByClassName('boxesP');

getText[0].innerHTML = "Some Random text";

getTitle[0].innerHTML = "Title";

for(i = 0; i < getBoxes.length; i++){

    getBoxes[i].style.backgroundColor = "#947062";

};