CODEWITHSUNDEEP
javascripthtml
mkleber
mkleber

Reputation: 3

Javascript and html hide a <p> container after onclick on button and send message if <input> is empty

I'm learning Javascript right now and I got a problem (might be a small problem for you guys). Here is my code:`

<!DOCTYPE html>
<html>
<body>

<input type="number" id="number1" placeholder="like 0,25" />
<input type="number" id="number2" placeholder="like 200" />
<input type="number" id="number3" placeholder="like 0,30"/>

<button onclick="myFunction()">Try it</button>

<p style="padding: 10px;
        width: 2em;
          border:3px green solid;" id="demo"></p>
<script>

function myFunction() {
    var x = document.getElementById("number1").value;
    var y = document.getElementById("number2").value;
    var z = document.getElementById("number3").value;


    var ergebnis = Math.round(eval("(x*x*y)/(z*z)"));
    var res = ergebnis;
    document.getElementById("demo").innerHTML = res;
    } 

</script>

</body>
</html>

Now I want that "error" will be displayed when the button is clicked and there is an empty input field. And that the <p> will be first displayed, when the button is clicked. I know that I can hide the <p> but I don't know how to make it visible after the click again.

Upvotes: 0

Views: 149

Answers (3)

cauchy
cauchy

Reputation: 1133

<!DOCTYPE html>
<html>
<body>

<input type="number" id="number1" placeholder="like 0,25" />
<input type="number" id="number2" placeholder="like 200" />
<input type="number" id="number3" placeholder="like 0,30"/>

<button onclick="myFunction()">Try it</button>

<p style="padding: 10px;
        width: 2em;
          border:3px green solid;display: none;" id="demo"></p>
<script>

function myFunction() {
    var x = document.getElementById("number1").value;
    var y = document.getElementById("number2").value;
    var z = document.getElementById("number3").value;


    var ergebnis = Math.round(eval("(x*x*y)/(z*z)"));
    var res = ergebnis;
    var resultbox = document.getElementById("demo");
    if(x && y && z){
    
    resultbox.innerHTML = res;

    resultbox.style.display = "block";
    resultbox.style.border = "3px green solid";
    resultbox.style.color = "black";
    } else {
     resultbox.innerHTML = "error";
    resultbox.style.display = "block";
    resultbox.style.border ="none";
    }
    
    } 

</script>

</body>
</html>

Upvotes: 0

Nicolas M. Pardo
Nicolas M. Pardo

Reputation: 762

What you can try is to change the inner content wether are the values were found, also I would recommend you not use inline css/js, you can instead use event listeners.

Everytime the functions is called it will clear out the result.

var demo = document.getElementById("demo");
function myFunction() {
    demo.innerHTML = '';
    var x = document.getElementById("number1").value;
    var y = document.getElementById("number2").value;
    var z = document.getElementById("number3").value;

  if(x && y && z){
    var ergebnis = Math.round(eval("(x*x*y)/(z*z)"));
    var res = ergebnis;
    demo.innerHTML = res;

    //You can also clear the inputs
    x.value = '';
    y.value = '';
    z.value = '';
  }else{
     demo.innerHTML = 'Oops one empty imput!'; 
     //Or delete the else if you don't want to show an error
  }
    
} 

document.querySelector('button').addEventListener('click', myFunction);
<input type="number" id="number1" placeholder="like 0,25" />
<input type="number" id="number2" placeholder="like 200" />
<input type="number" id="number3" placeholder="like 0,30"/>

<button>Try it</button>

<p id="demo"></p>

Upvotes: 0

Ele
Ele

Reputation: 33726

  • You need to evaluate the entered values
  • Add a block p to show an error.
  • If one field doesn't have value show the error.
  • If all fields contain data hide the error and show the result.

function myFunction() {
  var x = document.getElementById("number1").value;
  var y = document.getElementById("number2").value;
  var z = document.getElementById("number3").value;

  var ergebnis = Math.round(eval("(x*x*y)/(z*z)"));
  var res = ergebnis;

  if (x.trim() === '' || y.trim() === '' || z.trim() === '') {
    document.getElementById("error").className = "";
    return;
  } else {
    document.getElementById("error").className = "hide";
  }

  document.getElementById("demo").innerHTML = res;
  document.getElementById("demo").style.display = '';
}
#error {
  color: red;
}

.hide {
  display: none;
}
<input type="number" id="number1" placeholder="like 0,25" />
<input type="number" id="number2" placeholder="like 200" />
<input type="number" id="number3" placeholder="like 0,30" />

<button onclick="myFunction()">Try it</button>


<p id="error" class="hide">
  Some information is missing!
</p>

<p style="padding: 10px;
        width: 2em;
          border:3px green solid; display: none" id="demo"></p>

Hope it helps!

Upvotes: 1

Related Questions