CODEWITHSUNDEEP
javascripthtmlfunctiononclickdatalist
LeganV9
LeganV9

Reputation: 3

how to use javascript to extract and show a random text from a datalist when using onclick event?

I would like that a JavaScript function could take a random sentence from a datalist in the same file, and then show it when I click on a button with an "onclick" event. I am looking for the easiest way to do that. Does anyone have an example?

(Just looking around, trying JavaScript for the first time)

Upvotes: -1

Views: 148

Answers (2)

henxdl
henxdl

Reputation: 186

This is easy using the function parseInt() and 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>

EDIT:

Using the DOM HTML element <datalist> as your input, this is some working code:

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>
Working JSFiddle

Upvotes: 0

DCR
DCR

Reputation: 15698

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>

Upvotes: 1

Related Questions