使用 Javascript 制作故事答案

【问题标题】：Making a story using Javascript使用 Javascript 制作故事
【发布时间】：2017-04-04 16:13:13
【问题描述】：

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

我编写了仅在第一个跨度 (.adj) 上使用 querySelector 的 Javascript。它现在可以工作，但它只是文本框中分配给第一个跨度的第一个单词。我想使用 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>

【问题讨论】：

没有时间给出完整的答案，但基本上你会选择 selectorAll 并使用 adjektiv[i] ，就像这里jsbin.com/yawigegadu/edit?html,js,output
另外作为补充注释，习惯于“正确”命名变量非常有用，在您的情况下，“textValue”不是单个值，它是一个数组，因此为了代码可读性，您'最好将其命名为“textValues”或“textArray”。同样，您应该使用 adjektiv 的复数形式（我的挪威语？丹麦语？不是很好），但您明白我的意思 :)，此外，使用 . getElementsByClassName 和 .getElementById 来选择你的元素。
感谢您的意见，它成功了。我是挪威人，所以你是对的，呵呵。 “querySelector 非常不具描述性，而且有点矫枉过正”到底是什么意思？为什么我要使用其他的而不是 qS？
querySelector 是所有可能的选择方式的统称，仅从方法来看，您无法判断您的操作在做什么。 getElementById 和 getElementsByClassName 准确地告诉你你在做什么，也就是说，要么从它的 id 中获取 1 个元素，要么从它们的类名中获取多个元素。这些方法也为此进行了优化，仅此而已。

标签： javascript html dom innerhtml

【解决方案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>

但请注意，您可能需要检查在框中输入了多少字，以防字数超过 .adjs。

【讨论】：