Faire une histoire en utilisant Javascript

Question

Je travaille sur un petit site ici, qui est essentiellement une histoire avec des noms, et vous pouvez entrer les noms de votre choix dans une boîte de texte qui est censée être ajoutée à l'histoire complète en utilisant Javascript.

J'ai écrit Javascript qui utilise seulement querySelector sur le premier span (.adj). Cela fonctionne à partir de maintenant, mais c'est seulement le premier mot dans la zone de texte qui est assigné à la première travée. Je veux utiliser querySelectorAll et remplir toute l'histoire. Comment irais-je à propos de cela? Ceci est mon code actuel:

var textbox = document.querySelector("#adjektiver"); 
 
var button = document.querySelector("#generateBtn"); 
 
var adjektiv = document.querySelector(".adj"); 
 

 
function addWords() { 
 
    var textValue = textbox.value.split(","); //Array av strenger separert med komma 
 

 
    for (var i = 0; i < textValue.length; i++) { 
 
    adjektiv.innerHTML = textValue[i]; 
 
    //textbox = ""; 
 
    } 
 
} 
 

 
button.addEventListener("click", addWords);

.adj{color:blue}

<div class="left"> 
 
    <p>En dag den <span class="adj">_____________</span> Justin Bieber stod på sin <span class="adj">_____________</span> scene og sang på den <span class="adj">______________</span> sangen Girlfriend, fikk han plutselig øye på en <span class="adj">_____________</span> jente blant det <span class="adj">____________</span> publikummet.</p> 
 
</div> 
 

 
<div class="right"> 
 
    <legend>Skriv inn en kommaseparert liste av adjektiver. Du trenger å skrive inn <span id="numofWords"> __ </span> ord. Du har foreløpig skrevet inn <span id="currentNumOfWords">0</span> ord.</legend> 
 
    <textarea name="adjektiver" id="adjektiver" cols="30" rows="10"></textarea> 
 
    <button id="generateBtn">Lag historie!</button> 
 
</div>

Answer 1

Vous êtes très proche. Tout ce que vous devez faire est d'utiliser querySelectorAll (comme vous le savez), et au lieu de adjektiv.innerHTML, utilisez adjektiv[i].innerHTML:

var textbox = document.querySelector("#adjektiver"); 
 
var button = document.querySelector("#generateBtn"); 
 
// Use querySelectorAll here ↓ 
 
var adjektiv = document.querySelectorAll(".adj"); 
 

 
function addWords() { 
 
    var textValue = textbox.value.split(","); 
 

 
    for (var i = 0; i < textValue.length; i++) { 
 
    // Use adjektiv[i] here ↓ 
 
    adjektiv[i].innerHTML = textValue[i]; 
 
    } 
 
} 
 

 
button.addEventListener("click", addWords);

.adj{color:blue}

<div class="left"> 
 
    <p>En dag den <span class="adj">_____________</span> Justin Bieber stod på sin <span class="adj">_____________</span> scene og sang på den <span class="adj">______________</span> sangen Girlfriend, fikk han plutselig øye på en <span class="adj">_____________</span> jente blant det <span class="adj">____________</span> publikummet.</p> 
 
</div> 
 

 
<div class="right"> 
 
    <legend>Skriv inn en kommaseparert liste av adjektiver. Du trenger å skrive inn <span id="numofWords"> __ </span> ord. Du har foreløpig skrevet inn <span id="currentNumOfWords">0</span> ord.</legend> 
 
    <textarea name="adjektiver" id="adjektiver" cols="30" rows="10">foo,bar,baz,qux</textarea> 
 
    <button id="generateBtn">Lag historie!</button> 
 
</div>

Notez, cependant, que vous aurez probablement envie de vérifier combien de mots ont été entrés dans la boîte, au cas où il y aurait plus de mots que .adj s.