Скрыть элемент , если innerHTML равен "0" или пуст

#javascript

Вопрос:

Я пытаюсь создать простой калькулятор, но я застрял; мне нужно скрыть некоторые элементы. Мой код показан с комментариями ниже.

 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 amp;amp; $(this).val() == '')) ||
      $(this).val().indexOf('.') != -1) amp;amp; (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 amp;amp; $(this).val() == '')) ||
      $(this).val().indexOf('.') != -1) amp;amp; (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>

Итак, как вы можете видеть, мне нужно показывать эти два элемента «p», только если id = wynik заполнен и больше 0. Как бы я это сделал?

1. Почему вы смешиваете необработанный javascript с jQuery. Если вы собираетесь использовать jQuery, вам следует просто придерживаться селекторов, чтобы сэкономить время и проблемы. ie. $('#powierzchnia').val()

Ответ №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/

1. Я думаю, это могло бы сработать 🙂 Спасибо, но в результате можно скрыть также десятичные разряды?

2. Конечно, вам просто нужно сделать Math.trunc(s) . Я отредактировал код с его помощью.

Ответ №2:

Почему бы просто не проверить значение:

 if($(this).val() == '0' || $(this).val() == '' ) {
  $('#wynik').hide();
}

Вы можете отобразить с помощью jquery и на начальном этапе скрыть html-элемент с помощью css. Но я вижу, что вы показываете их после вычисления? Тогда это просто замечательно.

Но если вы хотите более сложный способ, то это:

 $('#wynik').css('display', function(i, v) {
  return ($(this).text() == '0' || $(this).text() == '') ? 'none' : 'block'
});