localStorage和大于和小于滑块

Question

我有一个滑块，我想让它按下按钮 -

如果变量（rangeValue）的值为1-50，则另一个变量（chanceofdeath）的值为1.

如果变量（rangeValue）的值为51-100，则另一个变量（chanceofdeath）的值为2.

这就是我所拥有的：https://jsfiddle.net/kzyffz9v/2/

虽然，它在段落中打印NaN。问题是localStorage，还是大于和小于语句？请更正我的代码。

Answer 1

将值初始化移动到函数，而不是在内联事件处理程序中使用。

还要确保在本地存储中设置变量。

<强> HTML

onchange="my2Function()">

<强> JS

function my2Function(){

    var rangeValue = parseInt(this.value, 10);

    if (rangeValue < 50 && x > 0){
        chanceofdeath +=1;
    }

<强> Check Fiddle

修改

localStorage.setItem("chanceofdeath", 23);
var chanceofdeath = parseInt(localStorage.getItem("chanceofdeath"), 10);
var inputElement = document.querySelector('.range-input');
var submitElement = document.querySelector('.submit');
var x = 2;

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

inputElement.addEventListener('change', function() {
  var rangeValue = parseInt(this.value, 10);
  chanceofdeath = chanceofdeath || 0;
  if (rangeValue < 50 && x > 0) {
    chanceofdeath += 1;
  }
  if (rangeValue < 100 && x > 49) {
    chanceofdeath += 2;
  }
});

<强> Edited Fiddle