I want to make an input that can be changed by a slider and by manual input, just like a regular . It has to be the same input because of JavaScript.
For example, here is the code I wrote:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopping distance calculator</title>
</head>
<body>
<!-- Train speed [mph]: <input type="number" name="mph" id="mph" placeholder="75" value="75"><br> -->
Train speed [mph]: <input type="range" id="mph" name="mph" min="0" max="125" value="75" oninput="this.nextElementSibling.value = this.value"/><output></output><br>
Deceleration [m/s<sup>2</sup>]: <input type="number" name="dec" id="dec" placeholder="0.9" value="0.9"><br>
Reaction time [s]: <input type="number" name="t" id="t" placeholder="3" value="3"><br>
<button onclick="main()">Calculate</button><br>
<button onclick="test()">Debug</button><br>
<span id="out" >[output]</span>
<script src="script.js"></script>
</body>
</html>
JavaScript:
const mph_in = document.getElementById("mph");
const dec_in = document.getElementById("dec");
const t_in = document.getElementById("t");
const out = document.getElementById("out");
mph_in.addEventListener('input', main);
dec_in.addEventListener('input', main);
t_in.addEventListener('input', main);
console.log(mph);
function m2mi(metre){
return metre/1609.344;
}
function main(){
// mph = 75.0;
// dec = 0.9;
// t = 1.0;
mph = parseFloat(mph_in.value);
dec = parseFloat(dec_in.value);
t = parseFloat(t_in.value);
v = mph*(1609.344/3600);
reaction = t * v;
braking = (v*v)/(2*dec);
s = reaction + braking;
console.log("main loaded");
console.log("reaction distance: "+reaction);
out.innerHTML = "Reaction distance: "+m2mi(reaction)+" mi<br> Braking distance: "+m2mi(braking)+" mi <br> <b>Stopping distance: "+m2mi(s)+" mi </b>";
}
function test(){
console.log(m2mi(2000));
// console.log("v = "+v);
}
The code works as intended, except the fact that the speed can only be controlled by a slider (and I would want to make it controllable by manual input too, just like the other inputs) and the deceleration and reaction time also controllable by a slider (not only by manual input). Is there any way to do this?
New contributor
PouLS is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.