Comment puis-je accéder aux éléments qui ont été créés par forEach en Javascript ?

Question

J'utilise l'API Star Wars swapi.co, et j'essaie d'accéder à l'id des films dans le code suivant, et de vérifier si la valeur est de 3 ou plus, si c'est le cas je veux ajouter une classe à l'élément qui affiche une icône.

Je ne parviens pas à getElementById("films"), peut-être parce que l'id a été écrit entre guillemets dans forEach.

let div = '<div id="inner-container">';
    data.forEach( function(item) {
        div += 
        '<ul class="item-container">'
        + '<li class="item">' + '<span>' + 'Starship Name: ' + '</span>' + '<br>' + item.name + '</li>' +
        '<li class="item">' + '<span>' + 'Starship Model: ' + '</span>' + '<br>' + item.model + '</li>' +
        '<li id="films" class="item">' + '<span>' + 'Number of Films: ' + '</span>' + item.films.length + '</li>' +
        '</ul>';

    });
    div += '</div>';
    document.getElementById("main-container").innerHTML = div;
});

Answer 1

function listItems(data) {
  let div = '<div id="inner-container">';
  data.forEach( function(item, index) {
    div += 
    '<ul class="item-container">'
    + '<li class="item">' + '<span>' + 'Starship Name: ' + '</span>' + '<br>' + item.name + '</li>' +
    '<li class="item">' + '<span>' + 'Starship Model: ' + '</span>' + '<br>' + item.model + '</li>' +
    '<li id="films-' + index + '" class="item">' + '<span>' + 'Number of Films: ' + '</span>' + item.films.length + '</li>' +
    '</ul>';
  });
  div += '</div>';
  document.getElementById("main-container").innerHTML = div;
};

listItems([{
  name: 'Hello 0', model: 'Model 0', films: [1,2,3]
},{
  name: 'Hello 1', model: 'Model 1', films: [1,2,3]
}]);

console.log(document.getElementById('films-0'));
console.log(document.getElementById('films-1'));

<div id="main-container"></div>

Voici l'exemple avec index comme suffixe de id .

Answer 2

Si vous voulez rendre le htmlString, ne concattez pas les variables dans les chaînes de caractères :

"<div class='crappy way'>"+ variable +"</div>"

Rendre htmlString avec les littéraux du modèle et interpoler les variables :

`<div class='better way'>${variable}</div>`

// A array to reference the root of SWAPI
const roots = ["Film", "People", "Planet", "Species", "Starship", "Vehicle"];

// A one time addition to DOM
const root = `
  <article class='${roots[4].toLowerCase()}s'>
    <header class='page'>
      <h2>${roots[4]}s</h2>
    </header>
  </article>`;

//Since an example of item wasn't provided, I guessed as to how it was structured. 
const items = [{
  name: "Death Star",
  model: "DS-1 Orbital Battle Station",
  films: ["https://swapi.co/api/films/1/"]
}, {
  name: "TIE Advanced x1",
  model: "Twin Ion Engine Advanced x1",
  films: ["https://swapi.co/api/films/1/"]
}, {
  name: "X-wing",
  model: "T-65 X-wing",
  films: ["https://swapi.co/api/films/2/", "https://swapi.co/api/films/3/", "https://swapi.co/api/films/1/"]
}];

// Reference main
const main = document.querySelector('main');

// Render htmlString root
main.insertAdjacentHTML('beforeend', root);

// Reference the new article tag 
const article = document.querySelector(`.${roots[4].toLowerCase()}s`);

//A Iterate through each object of the items array
//B Get the count of films array
//C1 if the count is more than 2...
//C2 .films should be rendered with an icon
//C3 else htmlString is without icon
//D htmlString for item
//E Render htmlStrings from C2-3 and D

for (let item of items) {//A
  let totalFilms = item.films.length;//B
  let films = totalFilms > 2 ? `<dd class='films'>Film Appearances: ${totalFilms} <i class='fas fa-medal'></i></dd>` : `<dd class='films'>Film Appearances: ${totalFilms}</dd>`;//C1-3

  let ship = `
    <dl class='item'>
      <dt class='name'>Starship Name: ${item.name}</dt>
      <dd class='model'>Starship Model: ${item.model}</dd>
      ${films}
    </dl>
    <hr>`;//D
  article.insertAdjacentHTML('beforeend', ship);//E
}

:root {font: 400 3vw/1.5 'Nova Square'}
dt, dd {
  margin-inline-start: 0px;
  margin-bottom: 4px;
}

<link href="https://fonts.googleapis.com/css?family=Nova+Square&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous">

<header class='site'>
  <h1>Star Wars</h1>
</header>
<main></main>