Struggling with fixed decimal place in Javascript

Viewed 39

I'm struggling with getting decimal places to display in 2 areas of my page.

I've got a page with a range slider, a read only value that gets displayed on the page and a text entry box for manual entry by the user of a price. I'd like for the following to happen (but it doesnt at the moment):

  • When a user adjusts the range slider the read only value "New suggestion" consistently returns a value to 2 decimal places. It does this at the moment except when the value ends in a 0 (zero), but I'd like it to always include the zero.
  • When a user adjusts the range slider the text entry box value "Adjust here" consistently returns a value to 2 decimal places. At the moment it returns anything before the decimal place, so if the user adjusted the range slider to 10.41 then the text entry box would only show 10, but I'd like it show the full 10.41.

I've tried a whole load of different possible ideas that I've found on this site and on codepen to try to get it to work but whatever I try doesnt work and I'm somewhat stuck! Worth noting that I'm very new to JavaScript and have only got this far by cobbling together other answers from this site.

Heres the code as it stands at the moment:

The HTML:

<p>Suggested: 13.53</p>

<label for="monday">New suggestion: <span id="monday"></span></label>
<p>
<input type="range" min="0.50" max="27.05" value="13.52" id="range" name="monday" step="0.01" oninput="changeInputValue(this.value)" />
<p>
Adjust here: <input type="number" id="number" required min="0.05" max="27.05" value="13.53" onkeyup="changeRangeValue(this.value)"/>  
<span id="message"></span>
<br />

The JavaScript:

var rpp = 13.53;
var t1 = rpp/100*75;
var t2 = rpp/100*133;
var t3 = rpp/100*170;
var msg;
function showValue1(newValue) { 
    document.getElementById("monday").innerHTML= newValue;
}

function changeRangeValue(val){
    document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
    if (val < t1) {
      msg = "Message 1";
    } else if (val >= t1 && val <= t2) {
      msg = "Message 2";
    } else if (val >= t2 && val <= t3) {
      msg = "Message 3";
    } else {
      msg = "Message 4";
    }
    document.getElementById("message").innerHTML = msg;
}

function changeInputValue(val){
    document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
    if (val < t1) {
      msg = "Message 1";
    } else if (val >= t1 && val <= t2) {
      msg = "Message 2";
    } else if (val >= t2 && val <= t3) {
      msg = "Message 3";
    } else {
      msg = "Message 4";
    }
    document.getElementById("message").innerHTML = msg;
}

All suggestions or points in the right direction very much appreciated.

Many thanks in advance for your help.

1 Answers

Convert the number to float instead of int. Only a floating number has decimal notation, intiger number does not have a decimal notation. Changing parseInt to parseFloat will do the job here. Check the updated snippet

var rpp = 13.53;
var t1 = rpp/100*75;
var t2 = rpp/100*133;
var t3 = rpp/100*170;
var msg;
function showValue1(newValue) { 
    document.getElementById("monday").innerHTML= newValue;
}

function changeRangeValue(val){
    document.getElementById("range").value = isNaN(parseFloat(val, 10)) ? 0 : parseFloat(val, 10);
    showValue1(val);
    if (val < t1) {
      msg = "Message 1";
    } else if (val >= t1 && val <= t2) {
      msg = "Message 2";
    } else if (val >= t2 && val <= t3) {
      msg = "Message 3";
    } else {
      msg = "Message 4";
    }
    document.getElementById("message").innerHTML = msg;
}

function changeInputValue(val){
    document.getElementById("number").value = isNaN(parseFloat(val, 10)) ? 0 : parseFloat(val, 10);
    showValue1(val);
    if (val < t1) {
      msg = "Message 1";
    } else if (val >= t1 && val <= t2) {
      msg = "Message 2";
    } else if (val >= t2 && val <= t3) {
      msg = "Message 3";
    } else {
      msg = "Message 4";
    }
    document.getElementById("message").innerHTML = msg;
}
<p>Suggested: 13.53</p>

<label for="monday">New suggestion: <span id="monday"></span></label>
<p>
<input type="range" min="0.50" max="27.05" value="13.52" id="range" name="monday" step="0.01" oninput="changeInputValue(this.value)" />
<p>
Adjust here: <input type="number" id="number" required min="0.05" max="27.05" value="13.53" onkeyup="changeRangeValue(this.value)"/>  
<span id="message"></span>
<br />

Related