JavaScript adding two numbers, adding vs concatenate, FCC Golf Code Challenge

Question

I've been struggling to figure out why my If Else statement is returning incorrectly with any value after Par. I believe it's because my If Else is attempting to concatenate instead of add, but I can't figure out how to fix it. Thanks! http://codepen.io/SalvatoreSantamaria/pen/XNGNqZ

function x(par, strokes) {

  if (strokes == 1) {
    return "Hole-in-one!";
  } else if (strokes <= par - 2) {
    return "Eagle";
  } else if (strokes == par - 1) {
    return "Birdie";
  } else if (strokes == par) {
    return "Par";
  } else if (strokes == par + 1) {
    return "Bogey";
  } else if (strokes == par + 2) {
    return "Double Bogey";
  } else if (strokes >= par + 3) {
    return "Go Home!";
  }
}

document.getElementById("submitText").addEventListener("click", function() {
  input = document.getElementById("inputText").value;
  input2 = document.getElementById("inputText2").value;
  document.getElementById("output").innerHTML = x(input, input2);
});

</br>
Input Par
<input type="number" id="inputText" />
</br>
Input Strokes
<input type="number" id="inputText2" />
</br>
<input type="Submit" id="submitText" value="Submit" </input>
<div id="output"></div>

Where do you guys learn to use . There's nothing like that!!! — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 24, 2016 at 17:36

Praveen Kumar Purushothaman · Accepted Answer · 2016-12-24 17:38:36Z

2

There are way too many issues with your code.

There's no . Replace it with  .
There's no </input>. Replace it correctly according to the below snippet.
Convert string to integer using parseInt().

You need to learn HTML correctly to get the right output:

function x(par, strokes) {
  par = parseInt(par);
  strokes = parseInt(strokes);
  if (strokes == 1) {
    return "Hole-in-one!";
  } else if (strokes <= par - 2) {
    return "Eagle";
  } else if (strokes == par - 1) {
    return "Birdie";
  } else if (strokes == par) {
    return "Par";
  } else if (strokes == par + 1) {
    return "Bogey";
  } else if (strokes == par + 2) {
    return "Double Bogey";
  } else if (strokes >= par + 3) {
    return "Go Home!";
  }
}

document.getElementById("submitText").addEventListener("click", function() {
  input = document.getElementById("inputText").value;
  input2 = document.getElementById("inputText2").value;
  document.getElementById("output").innerHTML = x(input, input2);
});

Input Par
<input type="number" id="inputText" />
<br />Input Strokes
<input type="number" id="inputText2" />
<br />
<input type="Submit" id="submitText" value="Submit" />
<div id="output"></div>

answered Dec 24, 2016 at 17:38

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scott Marcus Over a year ago

It's worth mentioning that you can have   or  , but not . Yet, more examples of how XHTML causes more problems than it solves. Merry Christmas! ;)

Praveen Kumar Purushothaman Over a year ago

@ScottMarcus Ha ha.. Welcome back. Sure. You could say XHTML is a double edged sword.

Community · Accepted Answer · 2017-05-23 12:09:07Z

2

An addition to Praveen Kumar's answer:

You could use the return literately and go on without else.

function x(par, strokes) {
    if (strokes == 1) {
        return "Hole-in-one!";
    }
    if (strokes <= par - 2) {
        return "Eagle";
    }
    if (strokes == par - 1) {
        return "Birdie";
    }
    if (strokes == par) {
        return "Par";
    }
    if (strokes == par + 1) {
        return "Bogey";
    }
    if (strokes == par + 2) {
        return "Double Bogey";
    }
    if (strokes >= par + 3) {
        return "Go Home!";
    }
}

document.getElementById("submitText").addEventListener("click", function() {
    input = +document.getElementById("inputText").value;   // use Number
    input2 = +document.getElementById("inputText2").value; // use Number
    document.getElementById("output").innerHTML = x(input, input2);
});

Input Par
<input type="number" id="inputText" />
<br />Input Strokes
<input type="number" id="inputText2" />
<br />
<input type="Submit" id="submitText" value="Submit" />
<div id="output"></div>

A more concise style could be the use of an object with a check for "Hole-in-one!" or with the delta of strokes - par, with a default value.

function x(par, strokes) {
    var delta = {
        'true': "Hole-in-one!",
        '-2': "Eagle",
        '-1': "Birdie",
        '0': "Par",
        '1': "Bogey",
        '2': "Double Bogey",
        '3': "Go Home!"
    };
    return delta[strokes == 1 || strokes - par] || delta[3];
}

document.getElementById("submitText").addEventListener("click", function() {
    input = +document.getElementById("inputText").value;   // use Number
    input2 = +document.getElementById("inputText2").value; // use Number
    document.getElementById("output").innerHTML = x(input, input2);
});

Input Par
<input type="number" id="inputText" />
<br />Input Strokes
<input type="number" id="inputText2" />
<br />
<input type="Submit" id="submitText" value="Submit" />
<div id="output"></div>

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Dec 24, 2016 at 17:50

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

5 Comments

Praveen Kumar Purushothaman Over a year ago

Ha ha... True that... :)

Scott Marcus Over a year ago

It would be much cleaner to set up a string variable and set the return string in the if branches and then just return that string after all the if statements. Nothing good has ever come from multiple returns. ;)

Nina Scholz Over a year ago

@ScottMarcus, it follows the style return early, return often.

Scott Marcus Over a year ago

That style is meant so that you can avoid else branches. It's not explicitly stating that multiple returns are necessarily good. In this case, you can avoid all the else and the return with a simple string variable. In programming in general, excessive branching code is a bad thing. It harkens back to the infamous goto.

Nina Scholz Over a year ago

@ScottMarcus, please see proposal with an object.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

If the values should be integers you should convert the strings (you get from the document.getElementById("inputText").value) to int, using the parseInt function:

function x(par, strokes) {

  if (strokes == 1) {
    return "Hole-in-one!";
  } else if (strokes <= par - 2) {
    return "Eagle";
  } else if (strokes == par - 1) {
    return "Birdie";
  } else if (strokes == par) {
    return "Par";
  } else if (strokes == par + 1) {
    return "Bogey";
  } else if (strokes == par + 2) {
    return "Double Bogey";
  } else if (strokes >= par + 3) {
    return "Go Home!";
  }
}

document.getElementById("submitText").addEventListener("click", function() {
  input = parseInt(document.getElementById("inputText").value);
  input2 = parseInt(document.getElementById("inputText2").value);
  document.getElementById("output").innerHTML = x(input, input2);
});

<br />
Input Par
<input type="number" id="inputText" />
<br />
Input Strokes
<input type="number" id="inputText2" />
<br />
<input type="Submit" id="submitText" value="Submit" />
<div id="output"></div>

Also note that you had HTML issues. I fixed them in this example.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 24, 2016 at 17:38

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

4 Comments

Praveen Kumar Purushothaman Over a year ago

Mate, did you even check the HTML?

Dekel Over a year ago

@PraveenKumar, You are right! there were html errors there. But the main issue was the problems with the int/string values :) (anyway - code updated)

Dekel Over a year ago

btw, @PraveenKumar , a voteup on my answer will be nice, as it was the first answer here who mentioned the real problem - the parseInt :) You added it to your answer afterwards.

Sam Santamaria Over a year ago

Thank you so much! :) I'm still learning HTML and JavaScript.

Community · Accepted Answer · 2017-05-23 11:45:52Z

It's actually very simple. ALL values taken from form elements (input elements in your case) are strings, not numbers.

In order to do math with them, you must first convert them to numbers.

Modify your line to use the parseInt() JavaScript function:

x(parseInt(input,10), parseInt(input2,10));

A better way to structure your code would be to not store the values of the input elements, but to store references to the elements themselves. That way you can keep referencing the objects over and over without having to scan for them over and over.

input = document.getElementById("inputText");
input2 = document.getElementById("inputText2");

var input1Num = parseInt(input.value, 10);
var input2Num = parseInt(input2.value, 10);
x(input1Num, input2Num);

Finally, as others have pointed out, some of your HTML is incorrect as you have markup like this:

</br>

and

<input type="Submit" id="submitText" value="Submit" </input>

Both of these errors are rooted in the misunderstanding of what elements must be terminated and what elements may not be explicitly terminated with a closing tag. Along with this is the (legal but largely irrelevant these days) syntax of "self-terminating" elements, which is a form of syntax that is used in a variant of HTML called XHTML. While this syntax is legal in HTML5, I highly discourage its use. For details on why, read my post here.

So finally, a finished version of the code would be:

// Get references to the DOM elements you'll need (not properties of the objects)
var input1 = document.getElementById("inputText1");
var input2 = document.getElementById("inputText2");
var output = document.getElementById("output");
var btn = document.getElementById("submitText");

// Wire up the button to run your function when it's clicked
btn.addEventListener("click", function(){
  // Only get the input values when you need to run your function
  var input1Num = parseInt(input1.value, 10);
  var input2Num = parseInt(input2.value, 10);

  // Call the function and pass it the values it needs
  output.textContent = x(input1Num, input2Num);
});
    

function x(par, strokes) {

  // You are going to return a string no matter what
  var result = "";
  
  if (strokes == 1) {
    result = "Hole-in-one!";
  } else if (strokes <= par - 2) {
    result = "Eagle";
  } else if (strokes == par - 1) {
    result = "Birdie";
  } else if (strokes == par) {
    result = "Par";
  } else if (strokes == par + 1) {
    result = "Bogey";
  } else if (strokes == par + 2) {
    result = "Double Bogey";
  } else if (strokes >= par + 3) {
    result = "Go Home!";
  }
  
  // Now just return once:
  return result;
}

<br>
Input Par
<input type="number" id="inputText1">
<br>
Input Strokes
<input type="number" id="inputText2">
<br>
<!-- Just use a regular button here, since you aren't actually
     submitting any form data anywhere -->
<input type="button" id="submitText" value="Submit">
<div id="output"></div>

Very helpful. Thank you for taking the time to explain everything!

Collectives™ on Stack Overflow

JavaScript adding two numbers, adding vs concatenate, FCC Golf Code Challenge

4 Answers 4

2 Comments

5 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

5 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related