Pole Trapezu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<html lang="pl">

<head>
    <title>Pole trapezu</title>
</head>

<body>
Podstawa A: <input type="number" id="basisAInput"/>
Podstawa B: <input type="number" id="basisBInput"/>
Wysokość: <input type="number" id="heightInput"/><br>
<button id="calculate">Oblicz</button><br>
Wynik: <div id="result"></div>

<script>

    var basisA;
    var basisB;
    var height;
    var resultDiv = document.querySelector("#result");
    var calculateBtn = document.querySelector("#calculate");
    var field;

    calculateBtn.addEventListener('click', function() {
        basisA = document.querySelector("#basisAInput").value;
        basisB = document.querySelector("#basisBInput").value;
        height = document.querySelector("#heightInput").value;
    });

    field = ((basisA + basisB)*height)/2;

    calculateBtn.addEventListener("click", function() {
        basisA = document.querySelector("#basisAInput").value;
        basisB = document.querySelector("#basisBInput").value;
        height = document.querySelector("#heightInput").value;

        if(basisA == "" || basisB == "" || height == "") {
            resultDiv.innerHTML = "Musisz coś wpisać";
        } else {
            resultDiv.innerHTML = field + " cm²";
        }

    });

</script>

</body>

</html>