This is a assignment to be run on jsfiddle so it has a split html and javascript code. html is given. The task is to make it work with the given html. I did as much as I could with my limited knowledge in javascript. I pretty much understand what I am missing in this code, I just don't know how to write it. I have nothing connecting the results with the randomizer. Can someone tell me how I would do it? I checked out other threads regarding min-average-max, but I don't think the way they are doing it would work for mine.
##html code
`<h2>Problem #4: Data Simulation</h2>
<button onclick="runSimulation()">Run Simulation</button><br>
Largest number: <input type="text" id="max" disabled><br>
Smallest number: <input type="text" id="min" disabled><br>
Average: <input type="text" id="average" disabled><br>`
##javascript code
const LOWER_BOUND = 10000;
const UPPER_BOUND = 60000;
function runSimulation() {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
document.querySelector("#max").value = max;
document.querySelector("#min").value = min;
document.querySelector("#average").value = average;
}
Since you are returning from the function, your DOM manipulation never works. Here is a similar working example:
const LOWER_BOUND = 10000;
const UPPER_BOUND = 60000;
function runSimulation(){
const [num1, num2] = [
Math.floor(Math.random() * (UPPER_BOUND - LOWER_BOUND) + LOWER_BOUND),
Math.floor(Math.random() * (UPPER_BOUND - LOWER_BOUND) + LOWER_BOUND)
]
const max = Math.max(num1, num2), min = Math.min(num1, num2)
const average = (max + min) / 2
document.querySelector("#max").value = max;
document.querySelector("#min").value = min;
document.querySelector("#average").value = average;
}<body>
<h2>Problem #4: Data Simulation</h2>
<button onclick="runSimulation()">Run Simulation</button><br>
Largest number: <input type="text" id="max" disabled><br>
Smallest number: <input type="text" id="min" disabled><br>
Average: <input type="text" id="average" disabled><br>
</body>