javascript - 我想制作一个范围滑块程序来获取用户的详细信息，然后向用户提供估计值，但我无法将值存储在变量中以供使用

Question

    <div class="value">1</div>
<input type="range" min="1" max="100" step="1" value="1">
<p id="first">200</p>
<p id="second">500</p>
<p id="1first">1111</p>

滑块的 JS 代码我想存储范围数据以计算两种费率，一种没有折扣，另一种有折扣，但我无法获取范围数据存储或在外部访问它我尝试制作另一个函数 rangeSlider 来获取数据输入，但它无法获得在职的

<script type="text/javascript">
           var slide = document.querySelector('input[type="range"]');
        var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
  var newValue = elem.value;
  document.querySelector('.value').innerHTML = newValue;
  var perYear = insertCommas(335+(70 * newValue));
  document.querySelector(".first").innerHTML = perYear;
  var perTen = insertCommas(335+(110 * newValue));
  document.querySelector(".second").innerHTML = perTen;
  var perTwenty = insertCommas(505+(130 * newValue));
  document.querySelector(".third").innerHTML = perTwenty;
}
elem.addEventListener("input", rangeValue);


var rangeSlide = function(){
  var x = slide.value;
  if (x < 2) {
    disc = 5;
  }
  if (x = < 4 && x > 2) {
    disc = 10;
  }
  document.querySelector('#value').innerHTML = x;
  var perYear1 = insertCommas(335+(70 * x));
  document.querySelector("#first").innerHTML = perYear1;
  var perTen2 = insertCommas( disc);
  document.querySelector("#second").innerHTML = perTen2;
  var perTwenty3 = insertCommas(505+(130 * x));
  document.querySelector("#third").innerHTML = perTwenty3;
}
slide.addEventListener("input", rangeSlide);


function insertCommas(x) {
  return parseInt(x).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>

标签： javascripthtmlevent-handling