ボタンをクリックして配列からランダムな単語を生成しようとしています

Question

これまでのところ、ページを更新するたびにリストからランダムな単語を取得しますが、ランダムな単語を生成するにはtextbox 「ショー」ボタンを押してください。それ、どうやったら出来るの？私はdocument.writeを別のものに切り替えるべきだと思いますか？代わりにonclickを試しましたが、動作しませんでした。

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

これらはあなたが従う必要があるいくつかのことです。

1. document.write()を絶対に使用しないでください。
2. 自己終了しないでください<div />タグ。
3. イベントリスナーを使用します。
4. スコープを正しく使用してください。ここでvarを削除します。
5. パラメータを賢明に使用します。ここではパラメータは必要ありません。これはグローバル変数をローカル変数にし、値を渡すこともありません。

あなたは単語を表示する場所が明確ではありません。だから、あなたは<input />にそれを示したいと思っていました。

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

あなたはビューにイベントハンドラを追加することは避けるべきです。代わりにaddEventListenerを使用してください。

あなたはまた、パラメータとしてwords配列を渡すべきではありませんdocument.writereason

を避ける必要があります。それは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" />

を返す機能の一部にすることができます