'Calculator how to validate correctly

How to make functions (addition, subtraction, etc.) execute only when there are 2 numbers and not how there is validation . Because now it works so that if I check if the validation was done correctly, it shows me right away

<body> 
        <form name="xD">
    Number 1: <input type="text" name="txtnum1" id="txtnum1"> <br> 
    Number 2: <input type="text" name="txtnum2" id="txtnum2"> <br> 
    
    <button type="submit" onclick="sumValues()">Oblicz</button>
    <p id="dodawanie">Addition: </p> 
    <p id="odejmowanie">Subtraction: </p> 
    <p id="mnozenie">Multiplication: </p>
    <p id="dzielenie">Division: </p> 
    </form> 
    <script> 
    let buttonik = document.querySelector("button")
    
    buttonik.addEventListener("click", (event) => {
        event.preventDefault();
        
        let inputyLOL = document.querySelectorAll("input");
    
        let liczbaok = inputyLOL[0].value;
        let liczbasztos = inputyLOL[1].value
        
        if(!liczbaok) {
            alert("Enter a number")
            return;
        }
          if(!liczbasztos) {
            alert("Enter a number")
             return;
    }


})
    
    
    function sumValues() { 
    var wymiarx, wymiary; 
    wymiarx=Number(document.xD.txtnum1.value); 
    wymiary=Number(document.xD.txtnum2.value); 
    
    var dodawanie1 = wymiarx + wymiary; 
    var odejmowanie1 = wymiarx - wymiary; 
    var mnozenie1 = wymiarx * wymiary; 
    var dzielenie1 = wymiarx / wymiary; 
    
    document.getElementById("dodawanie").innerHTML = "Addition: " + dodawanie1; 
    document.getElementById("odejmowanie").innerHTML = "Subtraction: " + odejmowanie1; 
    document.getElementById("mnozenie").innerHTML = "Multiplication: " + mnozenie1; 
    document.getElementById("dzielenie").innerHTML = "Division: " + dzielenie1; 
    } 
    </script> 
    </body>
javascripthtmldatecalculator


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions