Javascript 未添加 innerText 值

Question

var totalStatus = document.getElementById ('total_status');
var upcomingStatus = document.getElementById ('status_upcoming');
var progressStatus = document.getElementById ('status_progress');

totalStatus.innerHTML =
  parseInt (progressStatus.innerText) + parseInt (upcomingStatus.innerText);

// Get Upcoming Projects
function getUpcoming () {
  if (localStorage.getItem ('Upcoming') === null) {
    upcomingStatus.textContent = '[Upcoming]';
  } else {
    upcomingStatus.textContent = localStorage.getItem ('Upcoming');
  }
}

// Get Projects in Progress
function getProgress () {
  if (localStorage.getItem ('In Progress') === null) {
    progressStatus.textContent = '[Progress]';
  } else {
    progressStatus.textContent = localStorage.getItem ('In Progress');
  }
}

// Set Projects in progress
function setProgress (e) {
  if (e.type === 'keypress') {
    // Make sure enter is pressed
    if (e.which == 13 || e.keyCode == 13) {
      localStorage.setItem ('In Progress', e.target.innerText);
      progressStatus.blur ();
    }
  } else {
    localStorage.setItem ('In Progress', e.target.innerText);
  }
}

// Set Upcoming Projects
function setUpcoming (e) {
  if (e.type === 'keypress') {
    // Make sure enter is pressed
    if (e.which == 13 || e.keyCode == 13) {
      localStorage.setItem ('Upcoming', e.target.innerText);
      upcomingStatus.blur ();
    }
  } else {
    localStorage.setItem ('Upcoming', e.target.innerText);
  }
}

upcomingStatus.addEventListener ('keypress', setUpcoming);
upcomingStatus.addEventListener ('blur', setUpcoming);

progressStatus.addEventListener ('keypress', setProgress);
progressStatus.addEventListener ('blur', setProgress);

getUpcoming ();, 
getProgress ();

<div class="projects-status">
  <div class="item-status">
    <span class="status-number" id="status_progress" contenteditable="true"></span>
    <span class="status-type">In Progress</span>
  </div>
  <div class="item-status">
    <span class="status-number" id="status_upcoming" contenteditable="true"></span>
    <span class="status-type">Upcoming</span>
  </div>
  <div class="item-status">
    <span class="status-number" id="total_status"></span>
    <span class="status-type">Total Projects</span>
  </div>
</div>

当我在编辑即将进行的项目和正在进行的项目时，我希望更新项目总数，但它显示为 NaN。我认为它是从我的代码中获取没有价值的价值。但是在检查员中，仍在接收进度和即将进行的项目的值（innerText）。我应该在我的代码中更改什么？

Answer 1

您应该在setProgress()和setUpcoming()函数中设置totalStatus的innerHTML。这是因为当页面加载时，upcomingStatus 和 progressStatus 变量都不是数字。也许这段代码可以工作：

var totalStatus = document.getElementById ('total_status');
var upcomingStatus = document.getElementById ('status_upcoming');
var progressStatus = document.getElementById ('status_progress');

// Set Projects in progress
function setProgress (e) {
  if (e.type === 'keypress') {
    // Make sure enter is pressed
    if (e.which == 13 || e.keyCode == 13) {
      // localStorage.setItem ('In Progress', e.target.innerText);
      progressStatus.blur ();
      totalStatus.innerHTML = parseInt (progressStatus.innerText) + parseInt (upcomingStatus.innerText);
    }
  } else {
    // localStorage.setItem ('In Progress', e.target.innerText);
    totalStatus.innerHTML = parseInt (progressStatus.innerText) + parseInt (upcomingStatus.innerText);
  }
}

// Set Upcoming Projects
function setUpcoming (e) {
  if (e.type === 'keypress') {
    // Make sure enter is pressed
    if (e.which == 13 || e.keyCode == 13) {
      // localStorage.setItem ('Upcoming', e.target.innerText);
      upcomingStatus.blur ();
      totalStatus.innerHTML = parseInt (progressStatus.innerText) + parseInt (upcomingStatus.innerText);
    }
  } else {
  //  localStorage.setItem ('Upcoming', e.target.innerText);
    totalStatus.innerHTML = parseInt (progressStatus.innerText) + parseInt (upcomingStatus.innerText);
  }
}

upcomingStatus.addEventListener ('keypress', setUpcoming);
upcomingStatus.addEventListener ('blur', setUpcoming);

progressStatus.addEventListener ('keypress', setProgress);
progressStatus.addEventListener ('blur', setProgress);

<!DOCTYPE html>
<html>

<body>

<div class="projects-status">
  <div class="item-status">
    <span class="status-number" id="status_progress" contenteditable="true">[progress] </span>
    <span class="status-type">In Progress</span>
  </div>
  <div class="item-status">
    <span class="status-number" id="status_upcoming" contenteditable="true">[upcoming] </span>
    <span class="status-type">Upcoming</span>
  </div>
  <div class="item-status">
    <span class="status-number" id="total_status"></span>
    <span class="status-type">Total Projects</span>
  </div>
</div>

</body>
</html>

出于安全原因，我已经删除并评论了一些 localstorage 属性。

Javascript 未添加 innerText 值

Javascript is not adding innerText values

javascript

contenteditable

local-storage