Display Math calculation on a HTML Element with Javascript

Question

I got the following code that calculates a percentage and I want to show the correct result on a html element (p). This is what I have but it's not displaying at all:

Here it is the code in my site: https://btrpay.com/btrpay-landing-dev/

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

output.innerHTML = slider.value;
slider.oninput = function() {
var slider = document.getElementById("myRange");
var savings = ( ( slider * 2.65 ) / 100 ) * 12;
output.innerHTML = this.value;
//document.getElementById("demo").value = savings;
}

Why is it not displaying and how can i print the result of the formula?

Answer 1

You need to set the output's innerHTML to the savings result:

output.innerHTML = savings;

Here is how the code snippet would change:

var slider = document.getElementById('myRange');
var output = document.getElementById('demo');

output.innerHTML = slider.value; // this will update the value based on slider
slider.oninput = function () {
    var slider = document.getElementById('myRange');
    var savings = ((slider * 2.65) / 100) * 12;
    output.innerHTML = savings; // this will update the value based on slider + calculation
};