Question

能帮我如何在javascript中获取范围滑块的值吗？

<script>
    $(function()
    {
        $('.slider').on('input change', function(){
            $(this).next($('.slider_label')).html(this.value);
        });
        $('.slider_label').each(function(){
            var value = $(this).prev().attr('value');
            $(this).html(value);
        });


    })
</script>

 <p><label for="range_size">Size: </label> <input type="range" name="size"  class="slider" min="1" max="75" value="45">
                    <span  class="slider_label"></span></p>

                <p><label for="range_width">Width: </label> <input type="range" name="width" class="slider" min="1" max="6" value="1">
                    <span  class="slider_label"></span></p>

我正试图变得这样：

 <script type="text/javascript">
                    function calculate () {
                        var size = document.getElementById ("size").value;

alert(size);


</script>

但是它不显示任何警报。你能帮我吗？

Answer 1

使用value确实可以：

let p = document.getElementById("val")
let range = document.getElementById("slide")
let changeVal = () => {
  p.textContent = range.value
}
changeVal()

range.onchange = changeVal

<input id="slide" type="range" min="0" max="100"/><p id="val"></p>

B001ᛦ在评论中说，问题是您忘记在id上添加<input>

如果您愿意，也可以使用name，但需要注意，因为ID唯一时可以重用名称

let p = document.getElementsByName("val")[0]
let range = document.getElementsByName("slide")[0]
let changeVal = () => {
  p.textContent = range.value
}
changeVal()

range.onchange = changeVal

<input name="slide" type="range" min="0" max="100"/><p name="val"></p>

getElementsByName返回一个NodeList，因此您需要从此列表中获得所需的节点（如果只有一个，则为第一个）

作为旁注value确实存在于每种输入类型

如何获取范围滑块的值？

1 个答案: