Question

此代码中的所有内容都按照我的要求运行，除非我不知道如何将滑块上的任何数字应用于number变量。你能给予的任何帮助我都会非常感激！

＆＃13;

var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');

range.addEventListener('input', function (e) {
    field.value = e.target.value;
});

field.addEventListener('input', function (e) {
    range.value = e.target.value;
});



var number = 2000;
document.getElementById("id").innerHTML = number.toLocaleString('en');

var number2 = number;

if (number2 >= 10000) {
    number2 = Math.round(+number + 10);
}
else if (number2 >= 5000) {
    number2 = Math.round(+number + 5);
}
else {
    number2 = Math.round(+number + 1);
}

document.getElementById("id2").innerHTML = number2.toLocaleString('en');

＆＃13;

<input class="inputRange" type="range" min="1000" max="50000" value="1000" step="1000" id="slider"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="1000" />

<p> <span id="id"></span></p>
<p>$<span id="id2"></span></p>

＆＃13;

http://jsfiddle.net/rY3Tj/292/这应该有帮助！

Answer 1

＆＃13;

    var range = document.querySelector('.inputRange');
    var field = document.getElementById('num1');
    
    var number2 = 2001;
    
    var numberHtml = document.getElementById("id");    
    var number2Html = document.getElementById("id");
            
    range.addEventListener('input', function (e) {
        field.value = e.target.value;
        SetNumberValues(field.value);
    });    
    
    field.addEventListener('input', function (e) {     
        field.value = e.target.value;
        SetNumberValues(field.value);
    });
    
    function SetNumberValues(fieldValue)
    {
    
     numberHtml.innerHTML = fieldValue.toLocaleString('en');        
    
    if (fieldValue >= 10000) {
        number2 = Math.round(+fieldValue + 10);
    }
    else if (fieldValue >= 5000) {
        number2 = Math.round(+fieldValue + 5);
    }
    else {
        number2 = Math.round(+fieldValue + 1);
    }
    
    document.getElementById("id2").innerHTML = number2.toLocaleString('en');
    }

＆＃13;

    <input class="inputRange" type="range" min="1000" max="50000" value="1000" step="1000" id="slider"/>
    <input class="inputNumber" id="num1" min="1000" max="50000" step="1000" type="number" value="1000" />
    
    <p> <span id="id">2000</span></p>
    <p>$<span id="id2">2001</span></p>

＆＃13;

Answer 2

以下是工作代码：http://jsfiddle.net/e0s8z4hm/

基本上在range.addEventListener中你没有更新＃id2中的值。

当前：

range.addEventListener('input', function (e) {
    field.value = e.target.value;
});

做到：

range.addEventListener('input', function(e) {
  field.value = e.target.value;

。
$（ '＃ID2'）HTML（e.target.value）; //添加此行

});

如何将此滑块值与此<p>标记相关联？

2 个答案: