涉及滑块的奇怪错误

时间:2018-05-19 12:26:45

标签: javascript html slider

我无法修复一个奇怪的错误。 “500 + b +(500-b)/ n”不返回它应该返回的内容。以下是我的代码摘录:https://jsfiddle.net/st7bdp8z/1/

<html>
   <head> 
   </head>

   <body >
    <p id="txt"></p>
    <p id="txt2"></p>

    <div class="""slidecontainer">
      <input type="range" min="0" max="100" value="50" id="b">
    </div>

        <script>
        var n = 10;
        function route(b){
            document.getElementById('txt').innerHTML = 500+b+(500-b)/n;
            document.getElementById('txt2').innerHTML = 500-b-(500-b)/n;
        }

        document.getElementById("b").oninput = function() {
            route(this.value)
        }
        </script>
   </body>
</html> 

1 个答案:

答案 0 :(得分:0)

“b”的值是一个字符串。使用parseInt();

将其转换为整数

这样的事情:

var n = 10;

function route(b) {
  document.getElementById('txt').innerHTML = 500 + b + (500 - b) / n;
  document.getElementById('txt2').innerHTML = 500 - b - (500 - b) / n;
}

document.getElementById("b").oninput = function() {
  route(parseInt(this.value))
}
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" id="b">
</div>
<p id="txt"></p>
<p id="txt2"></p>