如何使用javascript提取和显示从数据时使用onclick事件随机文本?

Question

我希望JavaScript函数可以从同一文件中的数据列表中获取随机句子，然后在我单击带有"onclick"的按钮时显示它。事件。我正在寻找最简单的方法来做到这一点。有人能举个例子吗?

(只是环顾四周，第一次尝试JavaScript)

Answer 1

let dataList =["sentence 1","sentence 2","sentence 3","sentence 4"]
let div = document.getElementById('asd')
document.getElementsByTagName("button")[0].addEventListener("click",myFunc)
function myFunc(){
let x = parseInt(Math.random()* dataList.length )
div.innerHTML = dataList[x]
}

<button>click me</button>
<div id='asd'></div>

Answer 2

这很容易使用函数parseInt()和Math.random()*n:

var yourDataList = ["Option 1", "Option 2", "Option 3"]; // Define datalist
var myBtn = document.getElementById("yourIdHere"); //Declare button, replace yourIdHere with your ID
var randomNum = 0; //Decclre random number
function getRandom() { //Declare your function
randomNum = parseInt(Math.random() * yourDataList.length); //Get random number between 0 and the length of your datalist
return yourDataList[randomNum]; //Return your value
}
myBtn.addEventListener("click", function() { //Bind a listener to the button
alert(getRandom()); //Do whatever you want to with the random value
});

<button id = "yourIdHere">Click me!!</button>

编辑:

使用DOM HTML元素<datalist>作为输入，这是一些工作代码:

var yourDataList = document.getElementById("datalist"); // Define datalist
var myInput = document.getElementById("myInput");
var dataListOptionsElems = yourDataList.querySelectorAll("option");//Get all options elements
var dataListOptions = [];//Declare options
for(var i = 0;i<dataListOptionsElems.length;i++){
dataListOptions.push(dataListOptionsElems[i].value);
}
var myBtn = document.getElementById("yourIdHere"); //Declare button, replace yourIdHere with your ID
var randomNum = 0; //Declare random number
function getRandom() { //Declare your function
randomNum = parseInt(Math.random() * dataListOptions.length); //Get random number between 0 and the length of your datalist
return dataListOptions[randomNum]; //Return your value
}
myBtn.addEventListener("click", function() { //Bind a listener to the button
alert(getRandom());
console.log(getRandom());
myInput.value = getRandom();
//Do whatever you want to with the random value
});

<button id = "yourIdHere">Click me!!</button>
<input list="datalist" id="myInput">
<datalist id="datalist">
<option value="Option1">
<option value="Option2">
<option value="Option3">
<option value="Option4">
<option value="Option5">
</datalist>
<p>Note: the alert box, console message, and input value will not be the same, due to it being random each time the function is called.</p>

工作JSFiddle