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);
        }
    }

(...).value > "20" technically not a bug, but is a bit questionable — vadimk, Oct 20 '16 at 18:46

Suren Srapyan · Accepted Answer · 2016-10-20T18:47:00.410

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);
}

Uriel · Answer 2 · 2016-10-20T18:46:42.357

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)

edited Oct 20 '16 at 18:46

answered Oct 20 '16 at 18:39

Uriel

15,579
6
25
46

1

_if conditions with one command inside can ignore braces._ Yes, but IMHO [is bad practice](http://stackoverflow.com/questions/2125066/is-it-bad-practice-to-use-an-if-statement-without-brackets). – 001 Oct 20 '16 at 18:51
also although semi-colons aren't required after alerts, they make things cleaner IMO. – abc123 Oct 20 '16 at 18:52
@abc123 they are not required *at all*. – Uriel Oct 20 '16 at 18:52
@UrielEli IMO means in my opinion, feel free to have your own opinion. I also stated...cleaner and aren't required. I suppose you read after alerts and thought i meant only there, but instead I meant in your code. I see now you didn't use them at all which is completely fine. However, IMO it leads to [bad practices](http://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript) – abc123 Oct 20 '16 at 18:54
@UrielEli Whitespace is also not required. It doesn't mean it's a good idea not to use it. – kajetons Oct 20 '16 at 18:55

score 0 · Answer 3 · answered Oct 20 '16 at 18:51

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>

If else doing weird

3 Answers3

Notes: