javascript - 使用 Javascript 编写故事

Question

我正在这里开发一个小网站，它基本上是一个带有名词的故事，您可以在文本框中输入您选择的名词，该文本框应该使用 Javascript 添加到完整的故事中。

我编写的 Javascript 只在第一个跨度 (.adj) 上使用 querySelector。它现在可以工作，但它只是文本框中分配给第一个跨度的第一个单词。我想使用 querySelectorAll 并填充整个故事。我该怎么走 关于这样做？这是我当前的代码:

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

你们很接近。您需要做的就是使用 querySelectorAll (如您所知)，而不是 adjektiv.innerHTML，使用 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>

但请注意，您可能需要检查框中输入了多少个单词，以防单词数量多于 .adj。