javascript - slider 未定义/NaN 错误

Question

我有下面的 slider :

var rangeValue;
var chanceoflive;
var inputElement = document.querySelector('.range-input');

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

  chanceoflive = rangeValue > 51 ? 2 : 4;
  }
);

function handleClick(){
    alert(chanceoflive);
}

<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>

<button type="button" onclick="handleClick()" class="submit">Submit</button>

应该发生的是，如果 slider 低于 51，它会发出警报 4。如果 slider 不低于 51，它会发出警报 2。尽管如此，如果 slider 在 50，它会发出未定义或 NaN 警报 或 未定义。为什么会这样，我该如何解决？

Answer 1

现在开始吧

只需要初始化 chanceoflive

var rangeValue;
var chanceoflive =0;
var inputElement = document.querySelector('.range-input');

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

  chanceoflive = rangeValue > 51 ? 2 : 4;
  }
);

function handleClick(){
    alert(chanceoflive);
}

<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>

<button type="button" onclick="handleClick()" class="submit">Submit</button>