Making a "range" input type dynamic with an "onchange" event
Question
I have been trying to attach an onchange event to this snippet of code to make the range input dynamic as it slides, for over 2 days, but nothing seems to be working. It's for an interest rate calculator and I no longer have any idea what to do.
Can someone please show me how to make my slider dynamic? I've attached the relevant snippets of code below.
I've now edited the code for brevity.
function compute() { function updateRate(rate) { var rateval = document.getElementById("rate").value; document.getElementById("rate_val").innerText = rateval; } }
<.DOCTYPE html> <html> <head> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> <title>Simple Interest Calculator</title> </head> <body> <div class="container"> <h1>Simple Interest Calculator</h1> <form id="form1"> <label for="Interest Rate"></label> Interest Rate <input type="range" id="rate" min="1" max="20" step="0.25" default value="10.25">10.25%<span id="rate_val"> <br/> <br/> </div> </body> </html>
2 answers
solution1
0 ACCPTED 2022-09-26 19:50:51
Calling onchange(); on the input in the html. and passing this as a parameter.
Js: setting innertext of span to event.value event is the this i passed from the html..
Your html was also wrong:the text that was suppose to be inside the label was put after it ends.
span was opened but never closed & same text that gonna go inside span was put after it..
Indent your code after a new tag to make a habit of opening & closing tags.Until you get a hold on it. Good Luck...
function updateValue(event) { document.getElementById("rate_val").innerText = event.value; }
<div class="container"> <h1>Simple Interest Calculator</h1> <form id="form1"> <label for="Interest Rate">Interest Rate</label> <input onchange=updateValue(this) type="range" id="rate" min="1" max="20" step="0.25" default value="10.25"> <span id="rate_val">10.25%</span> </form> </div>
solution2
0 2022-09-26 19:56:19
The code is pretty self explanatory, i'm just using the input event to update the interest rate.
const rate = document.getElementById("rate"); function updateInterestRate() { document.getElementById("rate_val").innerText = rate.value + '%'; } function initializeSlider() { updateInterestRate(); rate.addEventListener("input", updateInterestRate) } initializeSlider();
<div class="container"> <h1>Simple Interest Calculator</h1> <form id="form1"> <label for="Interest Rate"></label> Interest Rate <input type="range" id="rate" min="1" max="20" step="0.25" default value="10.25"> <span id="rate_val">10.25%</span> <br/> <br/> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.