Question

我有以下滑块：

#include

var rangeValue;

localStorage.getItem('chanceoflive');
var chanceoflive = parseInt(localStorage.getItem("chanceoflive"));
var inputElement = document.querySelector('.range-input');
var submitElement = document.querySelector('.submit');
var x = 2;

submitElement.addEventListener('click', function() {
  document.getElementById('paragraph').innerHTML = chanceoflive;
  localStorage.setItem("chanceoflive", chanceoflive);
});

inputElement.addEventListener('change', function() {
  var rangeValue = parseInt(this.value);
  chanceoflive = chanceoflive || 0;


    if (rangeValue < 51 && rangeValue >= 0) {
      chanceoflive += 4;
    }
        else if (rangeValue < 100 && rangeValue > 50) {
            chanceoflive += 2;
          }


  }
);

function handleClick(){
    alert(chanceoflive);
}

基本上，当您将滑块滑动到50以上的数字时，它会输出2 <p id="write"></p> <main> <form oninput="output.value = Math.round(range.valueAsNumber / 1)"> <h2> Choose the Height of Your Building </h2> <div class="range"> <input name="range" type="range" min="0" max="100" class="range-input"> <div class="range-output"> <output id="output" class="output" name="output" for="range"> 50 </output> </div> </div> </form> </main> <a href="chooselength.html"><button type="button" onclick="handleClick()" class="submit">Submit</button></a>。当您将其滑动到50或更低的数字时，它会输出4 localStorage。

虽然，如果您将滑块滑动到50以上的数字然后滑动到数字50以下，它会输出6，因为它会增加2和4.我该如何解决这个问题？

Answer 1

+=分配将给定数字添加到变量中。如果您不想要这样的添加，但想要一个简单的作业，那么请不要使用+=，而只是=。所以改变这个：

if (rangeValue < 51 && rangeValue >= 0) {
    chanceoflive += 4;
}
else if (rangeValue < 100 && rangeValue > 50) {
    chanceoflive += 2;
}

对此：

if (rangeValue < 51 && rangeValue >= 0) {
    chanceoflive = 4;
}
else if (rangeValue < 100 && rangeValue > 50) {
    chanceoflive = 2;
}

请注意，值100存在问题，您没有值。您可能希望将< 100更改为<= 100。或者，您甚至可以删除该条件，因为rangeValue无法真正获得超出0...100范围的值。

所以你可以纠正并缩短上述内容：

changeoflive = rangeValue > 50 ? 2 : 4;

提示滑块输出

1 个答案: