Ich versuche, ein zufälliges Wort aus meinem Array mit einem Klick zu generieren

Question

Bisher bekomme ich ein zufälliges Wort aus der Liste jedes Mal, wenn ich die Seite aktualisieren, aber ich möchte in der textbox ein zufälliges Wort generieren können mit der Schaltfläche "Zeigen". Wie mache ich das? Ich nehme an, ich sollte document.write mit etwas anderem wechseln? Ich habe versucht onclick stattdessen, aber es hat nicht funktioniert.

var words = [ 
 
    'Hello', 
 
    'No', 
 
    'Hi', 
 
    'Banana', 
 
    'Apple' 
 
]; 
 

 
function randomWord(words) { 
 
    return words[Math.floor(Math.random() * words.length)]; 
 
} 
 

 
for (var x = 0; x < 1; x++) 
 
    document.write(randomWord(words));

<form name="f1"> 
 
    <input type="text" value="" name="textbox" id="textbox" /> 
 
    <input type="button" value="show" onclick="randomWord()" /> 
 
    <br/> 
 
</form> 
 
<div id="new" />

Answer 1

Dies sind ein paar Dinge, die Sie folgen müssen.

1. Verwenden Sie niemals document.write().
2. Nicht selbst schließen <div /> Tags.
3. Verwenden Sie Ereignislistener.
4. Verwenden Sie das Scoping richtig. Entfernen Sie die var hier.
5. Verwenden Sie die Parameter mit Bedacht. Sie brauchen hier nicht den Parameter, der die globale Variable zu einer lokalen Variable macht und Sie auch nicht den Wert übergeben.

Sie sind nicht klar, wo die Wörter angezeigt werden sollen. Also, ich nahm an, dass Sie es in der <input /> zeigen möchten.

words = [ 
 
    'Hello', 
 
    'No', 
 
    'Hi', 
 
    'Banana', 
 
    'Apple' 
 
]; 
 

 
function randomWord() { 
 
    document.getElementById("textbox").value = words[Math.floor(Math.random() * words.length)]; 
 
}

* {font-family: 'Segoe UI';}

<form name="f1"> 
 
    <input type="text" value="" name="textbox" id="textbox" /> 
 
    <input type="button" value="show" onclick="randomWord()" /> 
 
    <br/> 
 
</form> 
 
<div id="new"></div>

Answer 2

Sie vermeiden sollten im Hinblick auf Event-Handler hinzufügen. Verwenden Sie stattdessen addEventListener.

Sie sollten document.writereason

Sie sollten auch nicht passieren words Array als Parameter vermeiden. Das kann ein Teil der Funktion sein, die randomWord

function getRandomWord() { 
 
    var words = [ 
 
    'Hello', 
 
    'No', 
 
    'Hi', 
 
    'Banana', 
 
    'Apple' 
 
    ]; 
 
    var randomIndex = Math.floor(Math.random() * 10) % words.length; 
 
    return words[randomIndex]; 
 
} 
 

 
function print(str) { 
 
    document.getElementById('new').innerHTML = str; 
 
} 
 

 
function process(){ 
 
    var word = getRandomWord(); 
 
    print(word) 
 

 
} 
 
process() 
 
document.getElementById('btnShow').addEventListener('click', process);

<form name="f1"> 
 
    <input type="text" value="" name="textbox" id="textbox" /> 
 
    <input type="button" value="show" id="btnShow" /> 
 
    <br/> 
 
</form> 
 
<div id="new" />

zurückkehren