Я пытаюсь создать случайное слово из моего массива нажатием кнопки

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.

Вы должны избегать document.writereason

Вы также не должны проходить words массив в качестве параметра. Это может быть частью функций, возвращающих 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" />