javascript - 仅当用户在输入框中键入大于 0 的值时才显示元素

Question

我正在为《魔兽世界》经典版构建一个简单的统计计算器。这个想法是您选择一个类，在输入中输入一些值。当每个值发生更改时(我为此使用了更改和 keyup)，生成的“计算”也会出现在表单下方。很高兴我已经走到这一步，现在只想更进一步。

我正在使用普通 JS 和 jQuery。这是我的 fiddle 。 https://jsfiddle.net/ejnLbyug/

如果用户将元素留空，我想隐藏 HTML 中的元素。例如，现在，当用户将“耐力”框留空时，它仍然将“生命值”的结果显示为+0。

如果该输入框留空，我宁愿完全隐藏它，而不是显示 +0。我怎样才能对用inner.HTML打印的所有“结果”执行此操作？因此，直到用户实际在任何输入框中输入大于 0 的数字之前，这些元素都会被隐藏。

例如，我尝试了以下耐力输入:

if (stamina === 0) { return;
} else {
  document.getElementById('staminaresult').innerHTML = ('+' + stamina + ' Hit Points')
 }

但这似乎不起作用。有什么想法吗？

Answer 1

我已在您的文档上尝试过此代码，并且它有效，例如，我隐藏它的结果之一

 if(this.intellect > 0) {
   document.getElementById('intellectresult').innerHTML = ('+' + intellect + '  Mana');
 }

这里我使用window来获取更新后的当前状态(这在更新时工作得很好)

    window.intellect = intellect * 15; }

    // Intellect - mana result
    if(window.intellect > 0) {
       return document.getElementById('intellectresult').innerHTML = ('+' + 
        window.intellect + '  Mana');
    }

但是你需要将这个条件添加到每个document.innerHTML，我发现这不好，尝试使代码更短