首頁猿問如何在輸入框上獲取范圍輸入值？

如何在輸入框上獲取范圍輸入值？

JavaScript

DIEA 2021-10-14 10:20:01

我正在使用 js 從范圍滑塊中獲取值?，F在我想在輸入框中顯示它。var slider = document.getElementById("myRange");var output = document.getElementById("demo");output.innerHTML = slider.value;slider.oninput = function() { output.innerHTML = this.value;} <input type="range" min="1" max="10" name="ans" class="slider" id="myRange"> value:<p><span id="demo"></p> 需要在輸入框中顯示值

查看完整描述

3 回答

慕容708150

TA貢獻1831條經驗獲得超4個贊

你只需要一些小的改變。

var slider = document.getElementById("myRange");

var output = document.getElementById("demo");

var inputItem = document.getElementById("outputPounds");

output.innerHTML = slider.value;

weightConverter(slider.value);

slider.oninput = function() {

output.innerHTML = this.value;

weightConverter(slider.value);

}

function weightConverter(valNum) {

inputItem.value=valNum*2.2046;

}

<input type="range" min="1" max="200" name="ans" class="slider"

id="myRange">

<p class="agecls">Weight:<span id="demo" style="text-decoration:underline"

oninput="weightConverter(this.value)"

onchange="weightConverter(this.value)"></span></p>

<p>Pounds: <input type="text" value="0" id="outputPounds"></p>

反對回復 2021-10-14

冉冉說

TA貢獻1877條經驗獲得超1個贊

您的整個代碼可以簡化為一個函數，該函數讀取輸入值并更新要以公制或英制系統顯示值的兩個位置中的每一個。

將所有內容放在一個函數中使您可以將此函數的執行綁定到兩個事件：

a) on window.onloadevent（因此在頁面加載時完成轉換和顯示）；

b)在input.oninput事件上，所以當你滑動時它們也完成了。請注意，change事件僅在您釋放滑塊時input觸發，而在檢測到滑塊值輸入時觸發事件，而與輸入方法（鍵盤、鼠標、觸摸等）無關。

工作示例：

const updateValues = function() {

let inputValue = document.querySelector('#myRange').value;

document.querySelector('#outputKg').innerHTML = inputValue;

document.querySelector('#outputLbs').innerHTML = Math.round(inputValue * 220.462262) / 100;

}

window.onload = updateValues;

document.querySelector('#myRange').oninput = updateValues;

<p>Weight: <span id="outputKg"></span></p>

<p>Pounds: <span id="outputLbs"></span></p>

反對回復 2021-10-14

Qyouu

TA貢獻1786條經驗獲得超11個贊

請通過此更新代碼

<p class="agecls">Weight:<span id="demo" style="text-decoration:underline"></span></p>

<p>Pounds: <span id="outputPounds"></span></p>

var slider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = slider.value;

weightConverter(slider.value)

slider.oninput = function() {

output.innerHTML = this.value;

weightConverter(this.value)

}

function weightConverter(valNum) {

document.getElementById("outputPounds").innerHTML=valNum*2.2046;

}

</script>

反對回復 2021-10-14

3 回答
0 關注
274 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在輸入框上獲取范圍輸入值？

如何在輸入框上獲取范圍輸入值？

3 回答

添加回答