Question

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

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>

Answer 1

您需要获取值：

var slider1 = parseFloat(document.getElementById("slider1").value);
var slider2 = parseFloat(document.getElementById("slider2").value);
var slider3 = parseFloat(document.getElementById("slider3").value);
var slider4 = parseFloat(document.getElementById("slider4").value);
var slider5 = parseFloat(document.getElementById("slider5").value);
var slider6 = parseFloat(document.getElementById("slider6").value);
var slider7 = parseFloat(document.getElementById("slider7").value);

Answer 2

我们在ES6中！（使用slideX。 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>

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

2 个答案: