如何使用onclick按钮调用生成功能

Question

我正在尝试制作一个随机句子生成器，以便在适当的位置对随机形容词，名词和动词进行采样。

第一次，它会完美地生成句子，并提供再次生成按钮。但是，当我单击此按钮时，什么也没有发生。我不确定为什么。

如果在第一代中，在第一次单击按钮时，将句子简单地添加到已经存在的内容上，并且按钮上的文本更改为“ Generate another”（而不是“ Generate a句子”），那会更好。 ”然后，当再次单击该按钮时，句子应自动更改。

如果有人可以研究我的代码并为我提供帮助，那太好了，谢谢：

var nouns = ["girl", "boy", "man", "woman", "animal"];
var adjectives = ["giant", "tiny", "funny", "sad", "strange"];
var verbs = ["jumping", "running", "smiling", "exploding", "dying"];

document.write(
  "Welcome to the Useless Random Sentence Generator! More words and combinations will be added in the future. You can always email liorpoliti24@gmail.com for verb, noun, and adjective suggestions as well as other suggestions to make this generator better. Click the button to begin."
);

function randIndex() {
  var randIndex = Math.floor(Math.random() * 5);
  var noun = nouns[randIndex];
  var adjective = adjectives[randIndex];
  var verb = verbs[randIndex];
  var result = "The " + adjective + " " + noun + " is " + verb + ".";
  document.write(result);

  elem = document.createElement("hr");
  elem.setAttribute("width", "500px");
  elem.setAttribute("legth", "8000px");
  document.body.appendChild(elem);

  const btn = document.createElement("button");
  btn.innerText = "Generate Another";
  document.body.appendChild(btn);
  btn.innerText = "Generate Another";
  btn.addEventListener("click", () => {
    randIndex();
  });
}

<button onclick="randIndex();">
   Generate Random Sentence
</button>

Answer 1

这有效：

class LetterButtonState extends State<LetterButton>

    var nouns = ["girl", "boy", "man", "woman", "animal"];
    var adjectives = ["giant", "tiny", "funny", "sad", "strange"];
    var verbs = ["jumping", "running", "smiling", "exploding", "dying"];

    function randIndex() {
      var randIndex = Math.floor(Math.random() * 5);
      var noun = nouns[randIndex];
      var adjective = adjectives[randIndex];
      var verb = verbs[randIndex];
      var result = "The " + adjective + " " + noun + " is " + verb + "."
      var li = document.createElement("li");
      li.innerHTML = result;
document.getElementById("result").appendChild(li);

document.getElementById("generateButton").value = "Generate another";
    }

Answer 2

欢迎悖论Blu！不错的开始。足够的信息可以有效地帮助您！

这个怎么样？除其他事项外，我还自由添加了更多HTML上下文。

与使用document.write（）相比，最初的div元素似乎是一种更好的方法，我认为这些天来并不受到重视。

我给了button元素（和ul元素）id，是因为使用JS函数（例如document.getElementById）很容易识别和操作这种方式。

ul元素可以是常规div，section-几乎所有内容。 ul元素自然包含一堆li元素，因此看起来很合适。

您已经在自己的代码中创建并添加了一些新的按钮元素，所以我认为不必对此多说。

<div>
  <p>Welcome to the Useless Random Sentence Generator!
     More words and combinations will be added in the
     future. You can always email for verb, noun, and
     adjective suggestions as well as other suggestions
     to make this generator better.
     Click the button to begin.</p>
</div>

<button id="btn" onclick="randIndex();">
    Generate Random Sentence
</button>

<ul id="sent">
</ul>

然后，在脚本部分中：

const nouns = ["girl", "boy", "man", "woman", "animal"];
const adjectives = ["giant", "tiny", "funny", "sad", "strange"];
const verbs = ["jumping", "running", "smiling", "exploding", "dying"];


function randIndex() {
    const randIndex = Math.floor(Math.random() * 5);
    const noun = nouns[randIndex];
    const adjective = adjectives[randIndex];
    const verb = verbs[randIndex];
    const btn = document.getElementById('btn');
    const sent = document.getElementById('sent');
    const result = "The " + adjective + " " + noun + " is " + verb + ".";

    const newLI = document.createElement("li");
    newLI.innerText = result;
    sent.appendChild(newLI);
    btn.innerText = "Generate Another";
}

我可能应该添加一下输出内容的快照，尽管它很快又很脏：