如何使用 onclick 按钮重新调用生成的 function

Question

I am attempting to make a random sentence generator that samples in a random adjective, noun, and verb in the appropriate place.

The first time, it generates the sentence perfectly and gives the button to generate again. When I click this button though, nothing happens. I'm not sure why.

It would also be better if on the first generation, on the first button click, the sentence simply is added on to what is already there and the text on the button changes to "Generate another" instead of "Generate a sentence." Then, when you click the button again the sentence should automatically change.

If there is anyone who could study my code and help me but that would be great, thank you:

 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

This works:

 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"; }

 <div> "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;" </div> <ul id="result"></ul> <input type="button" id="generateButton" onclick="randIndex();" value="Generate Random Sentence" />

Answer 2

Welcome Paradox Blu. Pretty good start. Enough info to permit effective helping!

How about this? I've taken the liberty to add a bit more of the HTML context, among other things.

The initial div element seems a better approach than using document.write(), which is not held in high esteem these days, I believe.

I gave the button element (and the ul element) ids because it's fairly easy to use JS functions (like document.getElementById) to identify and manipulate that way.

The ul element could have been a regular div, section - pretty much anything. ul elements naturally contain a bunch of li elements, so that seemed to fit.

You already created and appended some new button elements in your own code, so I don't suppose I have to say much about that.

<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>

Then later, in the script section:

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";
}

I should probably add a shot of what the output looks like, quick and dirty though it is: