时间戳

首页 > 解决方案 > 如何获取范围滑块的值？

javascript - 如何获取范围滑块的值？

问题描述

你能帮我如何在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>

但它没有显示任何警报。你能帮我么？

标签： javascript

解决方案

使用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ᛦ</a> 在评论中所说，问题是你忘记id在你的<input>

如果您愿意，您也可以使用names 但您需要小心，因为名称可以重复使用，而 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返回 aNodeList所以你需要从这个列表中获取你需要的节点（如果你只有一个，第一个）

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

推荐阅读