时间戳

首页 > 解决方案 > html 中的范围值不适用于 if 语句

javascript - html 中的范围值不适用于 if 语句

问题描述

我创建了一个程序，当一个人达到该模式时，它将显示一个文本。我不起诉这些价值观似乎有什么问题。

function validate(){
  var slider1 = document.getElementById("slider1");
  var slider2 = document.getElementById("slider2");
  var slider3 = document.getElementById("slider3");
  var slider4 = document.getElementById("slider4");
  var slider5 = document.getElementById("slider5");
  var slider6 = document.getElementById("slider6");
  var slider7 = document.getElementById("slider7");
  if(slider2==16.5 && slider3==33 && slider4==49.5 && slider5==66 && slider6==82.5 && slider2==99){
    document.getElementById("demo").innerHTML = 5 + 6;
  };

};
<div class="activity">
  <div id="rangeInputs" class="inputsss">
    <input id="slider1" disabled class="range" type="range" min="0" max="100" value="0"><br>
    <input id="slider2" class="range" type="range" min="0" max="1" step="0.165" value="0"><br>
    <input id="slider3" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><br>
    <input id="slider4" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><br>
    <input id="slider5" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><br>
    <input id="slider6" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><br>
    <input id="slider7" class="range" type="range" min="0" max="99" step="16.5" value="0"><br>
  </div>

</div>
<p id="demo"></p>

标签： javascripthtml

解决方案

我们在 ES6 中！（使用 sliderX.valueAsNumber ）

const 
  f_rangeInputs = document.getElementById("rangeInputs"),
  demo          = document.getElementById("demo");

var SliderX = {};

document.querySelectorAll('#rangeInputs input[type=range]').forEach(elm=>   SliderX[elm.id]=elm );


function validate() {
  demo.textContent = ' x / 16.5 / 33 / 49.5 / 66 / 82.5 / 99 ';

  if ( SliderX.slider2.valueAsNumber==16.5   
    && SliderX.slider3.valueAsNumber==33
    && SliderX.slider4.valueAsNumber==49.5
    && SliderX.slider5.valueAsNumber==66
    && SliderX.slider6.valueAsNumber==82.5
    && SliderX.slider7.valueAsNumber==99
  ){
    demo.textContent = (5 + 6).toString();
  } 
}

function changedSlider(e) {
  this.nextSibling.textContent = this.value;
  validate() ;
}

for(let elm in SliderX) { SliderX[elm].onchange = changedSlider };

f_rangeInputs.onreset = ()=> { for(let elm in SliderX) { SliderX[elm].nextSibling.textContent = SliderX[elm].value } }

f_rangeInputs.reset();
div {
      display: inline-block;
      padding: 20px;
      border: 20px;
      background-color: cadetblue;
      border: 2px solid grey;
    }
<div class="activity">
  <form id="rangeInputs" class="inputsss">
    <input id="slider1" class="range" type="range" min="0" max="100" value="0"   step="10" disabled ><span></span><br>
    <input id="slider2" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
    <input id="slider3" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
    <input id="slider4" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
    <input id="slider5" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
    <input id="slider6" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
    <input id="slider7" class="range" type="range" min="0" max="99" value="0"    step="16.5" ><span></span><br>
  </form>
</div>
<p id="demo"> x / 16.5 / 33 / 49.5 / 66 / 82.5 / 99 </p>

推荐阅读