Why am I getting undefined when putting a string of html to the main page using jQuery?

Question

I'm fairly new to JavaScript and jQuery so any other advice you might have please leave in a comment below. I am making a card game to be played on a single screen in javascript.

Inside the div for id playerHand, I use a javascript function to output the hand of the current player's turn. Whenever I output the current player's hand, I get an output in that div like so:

undefined/ 6H / AD / 7H / 5H / 6S / KC / 8C / 10H / AC / 2H / 8S / 2D / 3S

The hand is made of 13 cards(denoted by numbers 2-10 and J, Q, K, A with a letter for hearts, spades, clubs and diamonds). All 13 cards print out to the div correctly but this random undefined thing is unexpected. The JavaScript function used to output this information is below.

JavaScript jQuery function:

function addHand() {
  var htmlString;
  for(i = 0; i < hands[currentPlayersTurn].handArray.length; i++) {
    htmlString += "/  "+ hands[currentPlayersTurn].handArray[i].name +" ";
  }
  $("#playerHand").html(htmlString);
}

_"The JavaScript function used to output this information is below in the complete javascript code but I pulled the specific function so you don't have to search for it."_ You should have posted only a [MCVE] that reproduces the problem. We don't want "complete code", nor a non-self-contained snippet. Must be the sixth time I've had to point that out today; why is this hard? — Lightness Races in Orbit, Feb 22 '17 at 19:39
@LightnessRacesinOrbit probably because all 6 times it was to a different user who hadn't been told it yet and/or doesn't care as long as an answer arrives. — Kevin B, Feb 22 '17 at 19:42
@KevinB: That is right. However the proportion of questions not showing a [MCVE] is going up. Didn't even think that were possible :( Why do people need to be "told it"? Why don't they _look up how the site works before posting?_ Big sigh. — Lightness Races in Orbit, Feb 22 '17 at 19:42
@KevinB I just looked up the .reduce function and sure it looks nifty but it seems to make it hard for me to understand/read but I will keep it in mind. Maybe more exposure would help haha. I am still a newbie but I'll get there! — xTaylorFerg, Feb 22 '17 at 20:12
`htmlString = [{name:'foo'},{name:'bar'}].reduce((result, hand) => {result.push(hand.name); return result;},[]).join(' / ');` there, fixed it :p result.push doesn't return the array. I'd suggest sticking with what you know for important stuff though. — Kevin B, Feb 22 '17 at 20:14

score 3 · Answer 1 · answered Feb 22 '17 at 19:38

3

Look here:

var htmlString;

htmlString's initial "value" is undefined.

Then you stringise it via string concatenation, and keep adding to that initial value. It's neither "random" nor "unexpected"; it's what you programmed into the computer.

You probably meant:

var htmlString = "";

so as to begin with the empty string.

answered Feb 22 '17 at 19:38

Lightness Races in Orbit

378,754
76
643
1,055

oh how painful this mistake was. thank you for solving this obnoxiously but easily overlooked detail – Aurielle Perlmann Mar 23 '18 at 17:46

scrappedcola · Accepted Answer · 2017-02-22T19:44:14.103

2

Your issues is with var htmlString since you do not initialize it. Though even if you set to empty string your output won't be as you expect because you will then just replace undefined/string/string/string with /string/string/string. A better approach would be to push the list of names into an array and then join them on /.

function addHand() {
  var htmlList = [];
  for(var i = 0; i < hands[currentPlayersTurn].handArray.length; i++) {
    htmlList.push(hands[currentPlayersTurn].handArray[i].name);
  }
  $("#playerHand").html(htmlList.join(" / "));
}

edited Feb 22 '17 at 19:44

answered Feb 22 '17 at 19:42

scrappedcola

10,423
1
32
43

This is the best solution. – Lightness Races in Orbit Feb 22 '17 at 19:43
1

Don't forget to add `var` before `i` to scope it (to the function). – Lightness Races in Orbit Feb 22 '17 at 19:44
@LightnessRacesinOrbit Thanks I didn't even notice that it wasn't init'd either. – scrappedcola Feb 22 '17 at 19:44
I also recommend `.text()` instead of `.html()` since that better reflects the program's intentions, though based on the sample input given I don't expect any practical difference. – Lightness Races in Orbit Feb 22 '17 at 19:44
@LightnessRacesinOrbit I have been writing my for loops in each function without adding var. Should I change them in each function as well? – xTaylorFerg Feb 22 '17 at 20:03
1

It's best practice to var your variables. http://stackoverflow.com/questions/1470488/what-is-the-purpose-of-the-var-keyword-and-when-to-use-it-or-omit-it is a nice discussion of to var or not to var – scrappedcola Feb 22 '17 at 20:05
@scrappedcola thank you! Fortunately I didn't have any global for loops. – xTaylorFerg Feb 22 '17 at 20:18
1

@xTaylorFerg: All it takes is for a global variable of the same name to exist, and you've broken it. No global loop needed. – Lightness Races in Orbit Feb 23 '17 at 00:56

Why am I getting undefined when putting a string of html to the main page using jQuery?

2 Answers2