Question

我创建了两个滑块，其值介于100和1000之间。我现在正在努力解决的问题是如何在html的另一个输入中将它们添加到一起。我尝试了几件事，没有一件事能正常工作。这是我到目前为止所得到的：

html代码：

    <div class="box1">
    <input type="range"  min="100" max="1000" value="0" step="100" onmousemove="showValue1(this.value)"/>
    <p id="tbox1">
    <input type="text" id="value1">
</div>

<div class="box2">
    <input type="range" min="100" max="1000" value="0" step="100" onmousemove="showValue2(this.value)"/ onchange="updateInput(.value)">
    <p id="tbox2">
    <input type="text" id="value2">
</div>

<div class="box3">
    <input type="text" id="value3" value="0">
</div>

的javascript：

      var value11 = document.getElementById("value1").value;
var value22 =document.getElementById("value2").value;
var answerG = (+value11 + +value22)


function showValue1(newValue)
{
document.getElementById("value1").value=newValue;
}
function showValue2(newValue)
{
document.getElementById("value2").value=newValue;
}

$('#value3').val(answerG);
function updateInput(answerG){
    document.getElementById("value3").value = answerG;
}

我试图做的事情是将两个滑块值加在一起，让它像它应该的那样工作。它现在不工作，因为我必须刷新页面才能获得正确的值。我希望当我滑动滑块时，值会改变它应该的方式。

提前谢谢。

Answer 1

你有一些jQuery，但javascript更多。如果你要加载jQuery，你也可以使用它。无论如何，这是一个工作脚本和Fiddle：

HTML：

<div class="box1">
    <input  id="1" type="range"  min="100" max="1000" value="0" step="100" value="100" />
    <p id="tbox1"></p>
    <input type="text" id="value1">
</div>

<div class="box2">
    <input id="2" type="range" min="100" max="1000" value="0" step="100" value="100" />
    <p id="tbox2"></p>
    <input type="text" id="value2">
</div>

<div class="box3">
    <input type="text" id="value3" value="0">
</div>

JS：

$(document).ready(function(){
    $("[type=range]").change(function(){
        $(this).siblings("input").val($(this).val());
        $("#value3").val(+$("#1").val() + +$("#2").val());
    });
});

滑块功能没有加起来

1 个答案: