Making a story using Javascript

Question

I am working on a small website here, which is basically a story with nouns, and you can enter nouns of your choice in a textbox which is supposed to be added to the full story using Javascript.

I wrote Javascript which is only uses querySelector on the first span (.adj). It works as of now, but its only the first word in the textbox that gets assigned to the first span. I want to use querySelectorAll and fill the entire story. How would I go about doing this? This is my current code:

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

You're very close. All you need to do is use querySelectorAll (as you know), and instead of adjektiv.innerHTML, use 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>

Note, however, that you'll probably want to check how many words were entered in the box, in case there are more words than .adjs.