在两个位置显示数组中的随机单词

Displaying a Random Word From Array in Two Spots

本文关键字:数组 随机 单词 显示 位置 两个      更新时间:2023-09-26
<input type="button" id="btnSearch" value="Search" onclick="myFunction();" />
<div id="message">
    <p></p>
</div>
<br>
<div id="message">
    <p></p>
</div>

<script type="text/javascript">
    function myFunction() {
        var myarray= new Array ("Drama", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folklore", "Historical Fiction", "Horror", "Humor", "Mystery", "Mythology", "Poetry", "Realistic Fiction", "Science Fiction", "Short Story", "Tall Tale");
        var random = myarray[Math.round(Math.random() * (myarray.length - 1))]
        var display = document.getElementById("message").innerHTML=random;
    }
</script>

到目前为止,我已经有了这个,我要做的是让一个按钮单击显示我的数组中的两个随机单词。提前感谢您的帮助!

https://jsfiddle.net/edexxmjo/

也许这是一个可行的解决方案

<button type="button" id="myBtn">Search</button>
<div id="message1">
</div>
<br>
<div id="message2">
</div>

这是JavaScript

document.getElementById("myBtn").addEventListener("click", clickHandler);
function clickHandler(event) {
    event.preventDefault();
    document.getElementById("message1").innerHTML = selectedWord();
    document.getElementById("message2").innerHTML = selectedWord();
}
function selectedWord(){
    var myarray = new Array("Drama", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folklore", "Historical Fiction", "Horror", "Humor", "Mystery", "Mythology", "Poetry", "Realistic Fiction", "Science Fiction", "Short Story", "Tall Tale");
    return myarray[Math.round(Math.random() * (myarray.length - 1))];
}

id是唯一的,如果您需要在两个位置显示class请使用选择器或添加另一个唯一id如下所示,

<div id="message">     
</div>
<br>
<div id="message_2">      
</div>
<script type="text/javascript">
    function myFunction() {
    var myarray= new Array ("Drama", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folklore", "Historical Fiction", "Horror", "Humor", "Mystery", "Mythology", "Poetry", "Realistic Fiction", "Science Fiction", "Short Story", "Tall Tale");
    var random = myarray[Math.round(Math.random() * (myarray.length - 1))]
    document.getElementById("message").innerHTML=random;
    document.getElementById("message_2").innerHTML=random;
    }
</script>

按 ID、标记、名称、类、CSS 选择器获取元素