javascript - 隐藏如果 innerHTML 为“0”或为空，则为元素

Question

我正在尝试制作一个简单的计算器，但我被卡住了；我需要隐藏一些元素。我的代码显示在下面的注释中。

function ekogroszek() {
  var p = document.getElementById("powierzchnia").value;
  var w = document.getElementById("wysokosc").value;
  var k = p * w;
  var e = 7.8;
  var s = k * e;
  document.getElementById("wynik").innerHTML = s;
}


$('#wysokosc').keypress(function(event) {
  if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
      $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
}).on('paste', function(event) {
  event.preventDefault();
});

$('#powierzchnia').keypress(function(event) {
  if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
      $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
}).on('paste', function(event) {
  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>First field</span>
  <input class="polekalkulacji" type="text" id="powierzchnia" name="powierzchnia" placeholder="np. 120">
</div>

<div>
  <span>Second</span>
  <input class="polekalkulacji" type="text" id="wysokosc" name="wysokosc" placeholder="np. 2.8">
</div>

<button onclick="ekogroszek()">Calculate</button>

<!--- Show below elements only if number (p id=wynik) is bigger than: "0" and field is filled --->
<p id="zapotrzebowanie">Result is:</p>
<p type="text" id="wynik"></p>

如您所见，仅当 id=wynik 已填充且大于 0 时，我才需要显示这两个“p”元素。我将如何执行此操作？

标签： javascript

Answer 1

如果您的目标是保持它们隐藏，直到它们被写入任何内容，并且它的值大于 0，那么实现它的最佳方法是默认隐藏它们：

<p id="zapotrzebowanie" style="display: none;">Result is:</p>
<p type="text" id="wynik" style="display:none;"></p>

当你给它们写 HTML 时，用 jQuery 显示它们：

function ekogroszek() {
  var p = $("#powierzchnia").val();
  var w = $("#wysokosc").val();
  var k = p * w;
  var e = 7.8;
  var s = k * e;
  document.getElementById("wynik").innerHTML = Math.trunc(s);
  if(s>0){
    $("#zapotrzebowanie").show();
    $("#wynik").show();
  }
}

您可以在此小提琴中检查代码的工作版本：

https://jsfiddle.net/0arcxze4/2/