If else doing weird

Question

I am trying to make is to when i fill in the text box 1 that it will pop up kwa1 and when i put in 4 in the text box that it will popup kwa1 kwa2 kwa3 kwa4 but i cant get it to work please help me

function kwadraat(){

        var kwa1 = "het kwadraat van 1 = 1\n"
        var kwa2 = "het kwadraat van 2 = 4\n"
        var kwa3 = "het kwadraat van 3 = 9\n"
        var kwa4 = "het kwadraat van 4 = 16\n"
        var kwa5 = "het kwadraat van 5 = 25\n"
        var kwa6 = "het kwadraat van 6 = 36\n"
        var kwa7 = "het kwadraat van 7 = 49\n"
        var kwa8 = "het kwadraat van 8 = 64\n"
        var kwa9 = "het kwadraat van 9 = 81\n"
        var kwa10 = "het kwadraat van 10 = 100\n"
        var kwa11 = "het kwadraat van 11 = 121\n"
        var kwa12 = "het kwadraat van 12 = 144\n"
        var kwa13 = "het kwadraat van 13 = 169\n"
        var kwa14 = "het kwadraat van 14 = 196\n"
        var kwa15 = "het kwadraat van 15 = 225\n"
        var kwa16 = "het kwadraat van 16 = 256\n"
        var kwa17 = "het kwadraat van 17 = 289\n"
        var kwa18 = "het kwadraat van 18 = 324\n"
        var kwa19 = "het kwadraat van 19 = 361\n"
        var kwa20 = "het kwadraat van 20 = 400\n"

        if (document.getElementById("kwadraatbox").value > "20");{
            alert("no solution")
        } 
        if (document.getElementById("kwadraatbox").value === 1);{
            alert(kwa1);
        }
        if (document.getElementById("kwadraatbox").value === 2);{
            alert(kwa1 + kwa2);
        }
    }

Answer 1

For first remove semicolons after the if (). .value returns string,so parse the value to int with parseInt(). And last, your if statements will work correctly,because the value can hold only one value, but with your logic it is good to use if-else-if

if (parseInt(document.getElementById("kwadraatbox").value) > 20){
            alert("no solution")
} 
else if (parseInt(document.getElementById("kwadraatbox").value) === 1){
            alert(kwa1);
}
else if (parseInt(document.getElementById("kwadraatbox").value) === 2){
            alert(kwa1 + kwa2);
}

Answer 2

• document.getElementById("kwadraatbox").value is a string, so it can not be === to 1, since it compares also the type. use parseInt(number) to convert it to integer.

• Remove the ; from after the declarations; they are ruining your functions (and generaly not needed in js).

• If you use document.getElementById("kwadraatbox").value three times, save it as a short variable.

• if conditions with one command inside can ignore braces.

---

That should result in:

value = parseInt(document.getElementById("kwadraatbox").value)

if (value > 20)
    alert("no solution")
else if (value == 1)
    alert(kwa1)
else if (value == 2)
    alert(kwa1 + kwa2)

Answer 3

Notes:

This pulls the value into a variable which is parsed to an Int, this allows comparison with other ints. Using a variable rather than pulling from the DOM repeatedly will give better performance. The variable is also checked against NaN incase someone didn't enter a integer.

window.onload=function(){
  var submitButton = document.getElementById('submit');
    submitButton.addEventListener('click', function() {
      kwadraat();
    }, false);
}

function kwadraat(){
        var kwa1 = "het kwadraat van 1 = 1\n";
        var kwa2 = "het kwadraat van 2 = 4\n";
        var kwa3 = "het kwadraat van 3 = 9\n";
        var kwa4 = "het kwadraat van 4 = 16\n";
        var kwa5 = "het kwadraat van 5 = 25\n";
        var kwa6 = "het kwadraat van 6 = 36\n";
        var kwa7 = "het kwadraat van 7 = 49\n";
        var kwa8 = "het kwadraat van 8 = 64\n";
        var kwa9 = "het kwadraat van 9 = 81\n";
        var kwa10 = "het kwadraat van 10 = 100\n";
        var kwa11 = "het kwadraat van 11 = 121\n";
        var kwa12 = "het kwadraat van 12 = 144\n";
        var kwa13 = "het kwadraat van 13 = 169\n";
        var kwa14 = "het kwadraat van 14 = 196\n";
        var kwa15 = "het kwadraat van 15 = 225\n";
        var kwa16 = "het kwadraat van 16 = 256\n";
        var kwa17 = "het kwadraat van 17 = 289\n";
        var kwa18 = "het kwadraat van 18 = 324\n";
        var kwa19 = "het kwadraat van 19 = 361\n";
        var kwa20 = "het kwadraat van 20 = 400\n";
        
        var kwadraatboxValue = parseInt(document.getElementById("kwadraatbox").value);
        if(kwadraatboxValue === NaN) {
          alert('not a valid int');
        }
        else if (kwadraatboxValue > 20){
            alert("no solution");
        } 
        else if (kwadraatboxValue === 1){
            alert(kwa1);
        }
        else if (kwadraatboxValue === 2){
            alert(kwa1 + kwa2);
        }
    }

<form>
  <label for='kwadraatbox'>
    <input type='text' id='kwadraatbox'/>
  </label>
  <input type='button' id='submit' value='submit'/>
  </form>