Using the value input to a programmatic range slider
Using the value input to a programmatic range slider
I've made these two programmatic range slider where the user may either select the value by sliding the bar or typing a number into the box. (I'm sure there's a more efficient method but I'm just learning)
However, when I try to use the value in the box for an addition it is returning NAN. I thought this was simply because it was using a string value, but even with the parseFloat function it is not displaying correctly.
How should I be referring to these variables outside the "function (thicknessA/B)" in order to use them in mathematical operations?
Thanks.
<html>
<body>
<h3> Thickness A</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessARange" value="0" min="0" max="100" step="0.1"
oninput="thicknessA(this.value)"
onchange="thicknessA(this.value)">
</input>
<br>
<p> Thickness A is:
<input type="number" id="thicknessANumber" value="0" min="0" max="100" step="0.1"
oninput="thicknessA(this.value)"
onchange="thicknessA(this.value)">
</input>
<span>mm</span></p>
<h3> Thickness B</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessBRange" value="0" min="0" max="100" step="0.1"
oninput="thicknessB(this.value)"
onchange="thicknessB(this.value)">
<br>
<p>Thickness B is:
<input type="number" id="thicknessBNumber" value="0" min="0" max="100" step="0.1"
oninput="thicknessB(this.value)"
onchange="thicknessB(this.value)"> </input>
<span>mm</span></p>
<h4>Your total is: <span id="total"></span>
<script>
var uno;
var dos;
var addition;
function thicknessA(newthicknessA)
document.getElementById('thicknessARange').value = newthicknessA;
document.getElementById('thicknessANumber').value = newthicknessA;
uno = document.getElementById('thicknessANumber').value;
function thicknessB(newthicknessB)
document.getElementById('thicknessBRange').value = newthicknessB;
document.getElementById('thicknessBNumber').value = newthicknessB;
dos = document.getElementById('thicknessBNumber').value;
addition = parseFloat(uno) + parseFloat(dos) ;
document.getElementById("total").innerHTML= addition;
</script></body></html>
1 Answer
1
I have a few comments that will hopefully help you out here.
The reason why you are getting NaN is two fold.
In Javascript:
parseFloat(undefined) = NaN (Not a number)
parseFloat(undefined) = NaN
addition
NaN
You can try something like this to illustrate these points:
```
<h3> Thickness A</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessARange" value="0" min="0" max="100" step="0.1" oninput="thicknessA(this.value)" onchange="thicknessA(this.value)"></input>
<br>
<p> Thickness A is:
<input type="number" id="thicknessANumber" value="0" min="0" max="100" step="0.1" oninput="thicknessA(this.value)" onchange="thicknessA(this.value)">
<span>mm</span></p>
<h3> Thickness B</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessBRange" value="0" min="0" max="100" step="0.1" oninput="thicknessB(this.value)" onchange="thicknessB(this.value)" />
<br>
<p>Thickness B is:
<input type="number" id="thicknessBNumber" value="0" min="0" max="100" step="0.1" oninput="thicknessB(this.value)" onchange="thicknessB(this.value)" />
<span>mm</span></p>
<h4>Your total is: <span id="total"></span></h4>
<script>
var uno = 0;
var dos = 0;
var addition;
function thicknessA(newthicknessA)
document.getElementById('thicknessARange').value = newthicknessA;
document.getElementById('thicknessANumber').value = newthicknessA;
uno = document.getElementById('thicknessANumber').value;
calculateTotal();
function thicknessB(newthicknessB)
document.getElementById('thicknessBRange').value = newthicknessB;
document.getElementById('thicknessBNumber').value = newthicknessB;
dos = document.getElementById('thicknessBNumber').value;
calculateTotal();
function calculateTotal()
addition = (parseFloat(uno) + parseFloat(dos));
document.getElementById("total").innerHTML = addition;
calculateTotal();
</script>
```
For your html, some style points:
Re: onchange/oninput browser support:
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Also is it correct to use both the "oninput" and "onchange" events to support different broswers or is it unnecessary?
– James
Aug 26 at 15:02