how to add a random number to generated list items in html
Question
I'm working on a project to create a workout generator. I'm trying to figure out how to add a random number (between 4 to 12 next to the exercises that get generated on refresh). Here is a basic of what I'm working with.
<html>
<form>
<input onclick="history.go(0)" value="refresh" type="button">
</form>
<h4>exercises</h4>
<ul>
<div id="exercise"></div>
</ul>
<script type="text/javascript">
var exerciseOptions=[
"db thruster",
"hand release burpees",
"db man maker",
"bb bear complex",
"tyre flip",
"wall ball shot",
"ball over shoulder throw",
"plate get up",
"plyo lunges",
"racked db lunges",
"jump squats",
"double mountain climber",
"broad jumps",
"kb goblet squats",
"bb squats",
"bb front squat",
"bb deadlift",
"box jump",
"box jump over",
"burpee box jump over",
"burpee box jump",
"plate overhead lunge",
"sandbag clean",
"handstand push up",
"hand release push ups",
"ring dips",
"burpee pull up",
"bb bench press",
"bb clean",
"bb hang clean",
"bb clean and press",
"bb hang clean and press",
"kb swings",
"bb strict shoulder press",
"bb push press",
"pull up",
"kb sumo deadlift high pulls",
"alternating db snatches",
"sit ups",
"commandos",
"commandos push ups",
"plate sit up",
"toes to bar",
];
var exercise = "";
for (var i = 0; i < 5;
rand = Math.random();
var index = Math.floor(rand * exerciseOptions.length);
//splice removes the element from the original array and returns the removed element(s)
exercise = exercise + "<div>" + exerciseOptions.splice(index,1); + "</div>";
//exerciseOptions = exerciseOptions.remove(index);
//exerciseOptions =
}
document.getElementById("exercise").innerHTML = exercise;
</script>
</html>
2 answers
solution1
0 2019-12-13 05:39:07
Can you explain the use case for updating this on an explicit refresh? Wouldn't it be better to just do this on page load so each time the page is visited you get the updated values? If you need or would like a button to give you a new set of values, you could make a function that returns the exercises with the randomized values and have both the onload and then an onclick produce new results.
Having a button in a form that does a refresh though just feels odd. It may be correct though depending on what you're trying to do which is why I think a bit more context would help.
You can achieve a random number between two values with Math.random() so you're on the right track. Sometimes though you do just have to read the documentation. I find MDN is a great source for this type of stuff.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
The section "Getting a random number between two values" should be able to get you a value between 4 and 12.
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
solution2
0 ACCPTED 2019-12-13 05:59:13
I hope adding this to your script answers your question right:
var random= Math.floor(Math.random() * (12 - (5)) ) + 4;
rand = Math.floor(Math.random());
var index = Math.floor(rand * exerciseOptions.length);
exercise = exercise + "<div>" + exerciseOptions.splice(index,1)+ " : "+random + "</div>";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.