使用“onchange”事件使“范圍”輸入類型動態化

Question

我一直在嘗試將 onchange 事件附加到這段代碼，以使范圍輸入在滑動時動態超過 2 天，但似乎沒有任何效果。 這是一個利率計算器，我不再知道該怎么做。

有人可以告訴我如何使我的 slider 動態化嗎？ 我在下面附上了相關的代碼片段。

為了簡潔起見，我現在編輯了代碼。

 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>

Answer 1

調用onchange(); 在 html 的輸入上。 並將this作為參數傳遞。

Js:將 span 的內部文本設置為event.value event是我從 html 傳遞的this 。

您的 html 也是錯誤的：應該在 label 內的文本是在它結束后放置的。

跨度已打開但從未關閉，並且在跨度內將 go 放在其后的相同文本..

在新標簽后縮進你的代碼，養成打開和關閉標簽的習慣。直到你抓住它。 祝你好運...

 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>

Answer 2

代碼很容易解釋，我只是使用輸入事件來更新利率。

 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>

使用“onchange”事件使“范圍”輸入類型動態化

問題描述

2 個解決方案

解決方案1
0 已采納 2022-09-26 19:50:51

解決方案2
0 2022-09-26 19:56:19

使用“onchange”事件使“范圍”輸入類型動態化

問題描述

2 個解決方案

解決方案1 0 已采納 2022-09-26 19:50:51

解決方案2 0 2022-09-26 19:56:19

解決方案1
0 已采納 2022-09-26 19:50:51

解決方案2
0 2022-09-26 19:56:19