Question

我有一个滑块，可以在按钮点击时提示输出，但它始终会提醒2，它应该提醒1,2,3或4.这是我的代码：

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

<main>
    <form oninput="output.value = Math.round(range.valueAsNumber / 1)">
      <h2>
          Choose the Length of Your House
        </h2>
      <div class="range">
        <input name="range" type="range" min="1" max="100" class="range-input">
        <div class="range-output">
          <output id="output" class="output" name="output" for="range">
            50
          </output>
        </div>
      </div>
    </form>
  </main>

    <div class="wrapper">
    <button align=center onclick="handleClick()">
      <canvas width="200" height="50" id="canvas" align=center></canvas>
      <hover></hover>
      <span id="submit">SUBMIT</span>
    </button>
    </div>

如果滑块设置为1，它应该发出警报1;如果滑块在2到50之间则发出警报2;如果滑块在51和99之间则发出警报3，如果设置为100则发出警报3。虽然，它会发出警报2，不管是什么。为什么，我该如何解决？

Answer 1

试试这个：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <main>
        <form oninput="output.value = Math.round(range.valueAsNumber / 1)">
            <h2>
                Choose the Length of Your House
            </h2>
            <div class="range">
                <input name="range" type="range" min="1" max="100" class="range-input">
                <div class="range-output">
                    <output id="output" class="output" name="output" for="range">
                        50
                    </output>
                </div>
            </div>
        </form>
    </main>

    <div class="wrapper">
        <button align=center onclick="handleClick()">
            <canvas width="200" height="50" id="canvas" align=center></canvas>
            <hover></hover>
            <span id="submit">SUBMIT</span>
        </button>
    </div>
    <script type="text/javascript">
        var inputElement = document.querySelector('.range-input');
        var submitElement = document.querySelector('#submit');
        var chanceoflive3 = chanceoflive3 || 0;

        submitElement.addEventListener('click', function () {
            document.getElementById('paragraph').innerHTML = (chanceoflive3 || 0);
            localStorage.setItem("chanceoflive3", chanceoflive3);
        });

        inputElement.addEventListener('change', function () {
            var rangeValue = parseInt(this.value);

            if (rangeValue == 1) {
                chanceoflive3 = 1;
            }

            else if (rangeValue > 1 && rangeValue < 51) {
                chanceoflive3 = 2;
            }

            else if (rangeValue > 50 && rangeValue < 100) {
                chanceoflive3 = 3;
            }

            else if (rangeValue == 100) {
                chanceoflive3 = 4;
            }
        });

    function handleClick() {
        alert(chanceoflive3);
    }
    </script>
</body>
</html>

警告错误的滑块输出

1 个答案: