Javascript - Show “text” when a certain value was placed in the Input Range

Question

I have been trying to do something for some time and I promise I have searched in many places, but I have not found a definitive solution. Maybe it's simple, but it's the first time I try to do something like this, so thank you for helping me!

This link has practically what I want: HTML Javascript change image with Slider bar

But instead of appearing images, I want to appear certain prices (values). I'm doing a freight calculator, and I wanted it when people put some value into the Range (lbs) it would show the price it would cost.

Example: Value 23 is selected in the Range. Then it will appear: $ 22.00.

Thanks everyone!

<input id="valR" type="range" min="0" max="100" value="0" step="5" 
oninput="showVal(this.value)" onchange="showVal(this.value)" />
<span id="range">0</span>
<img id="img">

<script>
var val = document.getElementById("valR").value;
document.getElementById("range").innerHTML=val;
document.getElementById("img").src = val + ".jpg";

function showVal(newVal) {
    document.getElementById("range").innerHTML=newVal;
    document.getElementById("").src = newVal+ ".jpg";
}
</script>

What seems to be the problem, other than `getElementById("")` which clearly doesn't get you anything ? — adeneo, Jul 01 '17 at 23:22
Kindly mark either answers provided below `accepted` / `vote up` if they provided helpful to you — Marylyn Lajato, Jul 02 '17 at 02:13
I do not want images to appear, but this: If the person selects 34 in the Range, then the following will appear: Shipping $ 200.00 — Wilson Nuny, Jul 03 '17 at 18:46

Thai Doan · Answer 1 · 2017-07-01T23:45:49.927

0

<input id="valR" type="range" min="0" max="100" value="0" step="5" oninput="showVal(this.value)" onchange="showVal(this.value)" />
<span id="range">0</span>
<div id="money"></div>

<script>
    var val = document.getElementById("valR").value;

    // Caculate your price from the chosen value
    var price = Number(val) + 1;

    document.getElementById("range").innerHTML = val;
    document.getElementById("money").innerHTML = "$ " + price;

    function showVal(newVal) {
        var newprice = Number(newVal) + 1; // Caculate the price from the chosen value
        document.getElementById("range").innerHTML = newVal;
        document.getElementById("money").innerHTML = "$ " + newprice;
    }
</script>

In the code, doing your freight calculator for variable price and new price

edited Jul 01 '17 at 23:45

answered Jul 01 '17 at 23:40

Thai Doan

300
3
14

thanks for helping me. Now where do I define the values that will appear? – Wilson Nuny Jul 03 '17 at 18:37
Example: If the person selects 34 in the Range, then the following will appear: Shipping $ 200.00 – Wilson Nuny Jul 03 '17 at 18:39

Pawan Kumar · Answer 2 · 2017-07-01T23:48:44.527

0

You could use document.getElementById("range").innerHTML= "$ "+newVal + ".00";

And you have missed the id in the last line of code, that's the reason your image file is not getting changed.

you have to write document.getElementById("img").src = newVal+ ".jpg"; instead of document.getElementById("").src = newVal+ ".jpg";

debugger;
var val = document.getElementById("valR").value;
document.getElementById("range").innerHTML="$ "+ val + ".00";
document.getElementById("img").src = val + ".jpg";

function showVal(newVal) {

    document.getElementById("range").innerHTML= "$ "+ newVal + ".00";
    document.getElementById("img").src = newVal+ ".jpg";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="valR" type="range" min="0" max="100" value="0" step="5" 
oninput="showVal(this.value)" onchange="showVal(this.value)" />
<span id="range">0</span>
<img id="img">

edited Jul 01 '17 at 23:48

answered Jul 01 '17 at 23:43

Pawan Kumar

1,374
7
14

I do not want images to appear, but this: If the person selects 34 in the Range, then the following will appear: Shipping $ 200.00 – Wilson Nuny Jul 03 '17 at 18:42
what is the calculation behind 34 and 200? – Pawan Kumar Jul 03 '17 at 19:22
does not exist. I would like to create these numbers. I can write one by one, I just need to know how. It is not a calculation, but a definite number. – Wilson Nuny Jul 03 '17 at 20:17
How to create numbers? do you mean you want to hard code `200.00` for value 34? and what will be the cost for other value? Also, If you don't want images to appear, then why you have an `img` tag and why are trying you update its `src` value? – Pawan Kumar Jul 03 '17 at 20:20
They asked me for the code I was creating. That was the closest to the desired result. There are no repeated values, it will look like this: Range - 1 = $ 10.00 Range - 2 = $ 13.00 Range - 3 = $ 14.00 They do not follow an order, but values that I will create. Is there a way to do this? – Wilson Nuny Jul 03 '17 at 20:36

Javascript - Show “text” when a certain value was placed in the Input Range

2 Answers2