J'essaye de faire une calculatrice simple mais je suis bloqué ; J'ai besoin de cacher certains éléments. Mon code est affiché avec des commentaires ci-dessous.

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>

Donc, comme vous pouvez le voir, je n'ai besoin d'afficher ces deux éléments "p" que si id=wynik est rempli et supérieur à 0. Comment pourrais-je procéder ?

2
Bryan 15 mars 2019 à 20:01

2 réponses

Meilleure réponse

Si votre objectif est de les garder cachés jusqu'à ce que quelque chose soit écrit dessus, et que la valeur y soit supérieure à 0, alors la meilleure façon d'y parvenir est de les masquer par défaut avec :

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

Et lorsque vous leur écrivez du code HTML, affichez-les avec 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();
  }
}

Vous pouvez vérifier une version fonctionnelle de votre code dans ce violon :

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

1
k3llydev 15 mars 2019 à 18:21

Pourquoi ne pas simplement vérifier la valeur :

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

Vous pouvez afficher avec jquery et, lors de la phase initiale, masquer l'élément html avec css. Mais je vois que tu les montres après calcul ? Ensuite, c'est très bien.

Mais si vous voulez la méthode la plus difficile, c'est :

$('#wynik').css('display', function(i, v) {
  return ($(this).text() == '0' || $(this).text() == '') ? 'none' : 'block'
});
1
Bhojendra Rauniyar 15 mars 2019 à 17:38