打印`localStorage`变量时出现NaN错误

Question

我有以下滑块重复三次，每个滑块都有不同的变量名称 -

var rangeValue = 4;
var chanceoflive2 = 4;


var inputElement = document.querySelector('.range-input');
var submitElement = document.querySelector('.submit');

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

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

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

function handleClick(){
    alert(chanceoflive2);
}

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

然后我有以下页面，它添加了所有localStorage个变量并打印出来 -

console.log(localStorage.getItem('changeoflive1'));
console.log(localStorage.getItem('changeoflive2'));
console.log(localStorage.getItem('changeoflive3'));
console.log(localStorage.getItem('changeoflive4'));

var chanceoflive1 = parseInt(localStorage.getItem("chanceoflive1"));
var chanceoflive2 = parseInt(localStorage.getItem("chanceoflive2"));
var chanceoflive3 = parseInt(localStorage.getItem("chanceoflive3"));
var chanceoflive4 = parseInt(localStorage.getItem("chanceoflive4"));

document.getElementById('print4').innerHTML = (chanceoflive1) + (chanceoflive2) + (chanceoflive3) + (chanceoflive4);

<p id="print"></p>

虽然，它只是打印NaN。为什么呢？