L'option onChange ne change qu'une fois

Question

J'ai une sélection avec quelques options et je veux changer le contenu d'un div en utilisant innerHTML.replace chaque changement dans la sélection en utilisant JS seulement, Mon problème est que le contenu change seulement une fois par rafraîchissement et ensuite il ne fonctionne plus jusqu'à ce que je ne rafraîchisse pas la page.

(J'utilise FF, j'ai essayé avec Chrome aussi) .

Merci d'avance !

CODE HTML :

function func() {
  let mystudents = [{
      Name: "AAA",
      Year: 2,
      Age: 25,
      Exceptional: true
    },
    {
      Name: "BBB",
      Year: 2,
      Age: 25,
      Exceptional: false
    },
    {
      Name: "CCC",
      Year: 2,
      Age: 27,
      Exceptional: false
    },
    {
      Name: "DDD",
      Year: 2,
      Age: 26,
      Exceptional: true
    }
  ];

  let template1 = document.getElementById('first-item-template');
  let selected = mystudents[document.getElementById('student-list').value];
  template1.innerHTML = template1.innerHTML.replace('[Name]', selected.Name)
    .replace('[Year]', selected.Year)
    .replace('[Age]', selected.Age)
    .replace('[Exceptional]', selected.Exceptional);
}

<form>
  <label for="student-list">Choose a class:</label>
  <select name="student-list" id="student-list" oninput="func();">
    <option value="0"> Class1 </option>
    <option value="1"> Class2 </option>
    <option value="2"> Class3 </option>
    <option value="3"> Class4 </option>
  </select>
  <br><br>
</form>

<div id="first-item-template">
  <li>
    <span>[Name]</span><br>
    <label>Year: </label><span>[Year]</span><br>
    <label>Age: </label><span>[Age]</span><br>
    <label>Exceptional: </label><span>[Exceptional]</span><br>
  </li>
</div>

Answer 1

Comme mentionné dans la réponse de @SomoKRoceS, une fois que vous avez effectué le changement initial, vous ne trouverez plus de correspondance par la suite. Mais, au lieu d'un replace il suffit de mettre à jour les éléments directement.

Quelques éléments à prendre en compte :

• N'utilisez pas d'attributs d'événement HTML en ligne.
• N'utilisez pas .innerHTML quand il n'y a pas de HTML parce que .innerHTML a implications en matière de performance et sécurité .
• Obtenez vos références d'éléments DOM une seule fois, plutôt que chaque fois que la fonction pour éviter des recherches excessives dans le DOM.

Voir les commentaires supplémentaires en ligne :

<!-- If you aren't actually submitting data anywhere,
     you don't need the form element, nor do you need
     your form fields to have a name attribute. -->

   <label for="student-list">Choose a class:</label>
   <select id="student-list">
     <option value=""> --- Select --- </option>     
     <option value="0"> Class1 </option>
     <option value="1"> Class2 </option>
     <option value="2"> Class3 </option>
     <option value="3"> Class4 </option>
  </select>

  <div id="first-item-template">
    <!-- You can't have an <li> unless it's a child of an <ol> or <ul> -->
    <ul>
      <li>
        <span class="name">[Name]</span><br>
          <label>Year: </label><span class="year">[Year]</span><br>
          <label>Age: </label><span class="age">[Age]</span><br>
          <label>Exceptional: </label><span class="exceptional">[Exceptional] 
        </span>
        <br>
      </li>
    </ul>
 </div>

<script>
  // Just declare these once, not every time the function runs
  let mystudents = [
      { Name:"AAA", Year: 2, Age: 25, Exceptional: true},
      { Name:"BBB", Year: 2, Age: 25, Exceptional: false},
      { Name:"CCC", Year: 2, Age: 27, Exceptional: false},
      { Name:"DDD", Year: 2, Age: 26, Exceptional: true}];

   let template1 = document.getElementById('first-item-template');
   let name = template1.querySelector("span.name");
   let year = template1.querySelector("span.year");
   let age = template1.querySelector("span.age");
   let exceptional = template1.querySelector("span.exceptional");
   let studentList = document.getElementById('student-list');

   // Do your event binding in JavaScript, not HTML. And use the
   // "change" event here rather than "input".
   document.getElementById("student-list").addEventListener("change", func);

   function func() {
     let selected = mystudents[studentList.value];

     // Update the individual elements directly, not with a replace method.
     // Don't use .innerHTML when the strings don't contain any HTML, 
     // use .textContent instead.
     name.textContent = selected.Name;
     year.textContent = selected.Year;
     age.textContent = selected.Age;
     exceptional.textContent = selected.Exceptional;     
  }

</script>

Answer 2

C'est parce qu'après l'avoir modifié une fois, il n'y a plus de chaînes de caractères correspondant à [Name] [Year] [Exceptional] y [Age] (La nouvelle valeur à l'intérieur de ces étiquettes est la valeur sélectionnée précédemment).

Replace recherche la chaîne que vous avez donnée et la remplace par la nouvelle chaîne. Mais après le premier remplacement, vous ne trouverez pas les chaînes initiales.

Si vous souhaitez modifier le contenu de la page span vous devrez donner à chacun d'entre eux un nom d'utilisateur et un mot de passe. id et changer l'identifiant. Comme ça :

 <form>
   <label for="student-list">Choose a class:</label>
     <select name="student-list" id="student-list" oninput="func();">
       <option value="0"> Class1 </option>
       <option value="1"> Class2 </option>
       <option value="2"> Class3 </option>
       <option value="3"> Class4 </option>
    </select>
 <br><br>
 </form>

  <div id="first-item-template">
    <li>
      <span id="namespan" >[Name]</span><br>
      <label>Year: </label><span id="yearspan" >[Year]</span><br>
      <label>Age: </label><span id="agespan" >[Age]</span><br>
      <label>Exceptional: </label><span id="exceptionalspan" >[Exceptional]</span><br>
    </li>
 </div>

Ensuite, dans la fonction :

<script>
  function func() {
     let mystudents = [
      { Name:"AAA", Year: 2, Age: 25, Exceptional: true},
      { Name:"BBB", Year: 2, Age: 25, Exceptional: false},
      { Name:"CCC", Year: 2, Age: 27, Exceptional: false},
      { Name:"DDD", Year: 2, Age: 26, Exceptional: true}];

     let selected = mystudents[document.getElementById('student-list').value];
     document.getElementById('namespan').innerHTML = selected.Name;
     document.getElementById('yearspan').innerHTML = selected.Year;
     document.getElementById('agespan').innerHTML = selected.Age;
     document.getElementById('exceptionalspan').innerHTML = selected.Exceptional;

}

</script>