Replace text in an <li> tag in an ul

Question

I'm new to web programming, and I'm trying to complete a simple guessing game project.

Right now I'm stuck because I'm trying to update an unordered list with the player's past guesses, but the page does not update.

Here is my jQuery code:

$(document).ready(function() { 

    game = new Game;

    var guessNum

    onSubmit = function(event){
        event.preventDefault();
        var input = $('#player-input');
        var guess = +input.val();
        input.val('');
        var result = game.playersGuessSubmission(guess);

        if (result == 'You have already guessed that number.') {
            $('#title').text(result);
        } else if (result === 'You Win!' || result === 'You lose.') {
            $('#title').text(result);
            $('#subtitle').text('Press the reset button to play again.')
            $('#hint').prop('disabled', true)
            $('#submit').prop('disabled', true)
        } else { //this is the relevant portion
            guessNum = (game.pastGuesses.length - 1).toString();
            $('#' + guessNum).text(guessNum);
        } 
    };

    $('#submit').on('click', function(e){
        onSubmit(e);
    });

    $('#player-input').on('keypress', function(e) {

        if(e.which == 13) {
            e.preventDefault();
            onSubmit(e);
        };
    });
});

Here is the unordered list's html:

 <div id='guesses'>
        <!-- unordered list of guesses -->
        <ul id='past-guesses' class="list-inline center">
          <li id='0' class="guess list-group-item ">-</li>
          <li id='1'class="guess list-group-item">-</li>
          <li id='2' class="guess list-group-item">-</li>
          <li id='3' class="guess list-group-item">-</li>
          <li id='4' class="guess list-group-item">-</li>
        </ul>
      </div>

I have also tried not using the identifiers in the html, and instead selecting the li elements this way:

 var idStr = "#past-guesses:eq(" + guessNum + ")"
 $(idStr).text(game.playersGuess.toString());

In either case, the page does not update with the new values in the unordered list displayed. What am I doing wrong?

EDIT

In response to the request in comments, here's my entire JS file (now slightly edited because I was experimenting with changing the list id's to not begin with a number):

function generateWinningNumber() {
    num = Math.random()
    if (num === 0) {
        return 1;
    } else {
      roundNum = Math.floor(num*100);
      return roundNum + 1;
    }
}

function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

function Game(){
    this.winningNumber = generateWinningNumber();
    this.playersGuess = null;
    this.pastGuesses = [];
}

Game.prototype.difference = function() {
    return Math.abs(this.playersGuess - this.winningNumber);
}

Game.prototype.isLower = function() {
    if (this.playersGuess < this.winningNumber) {
        return true;
    } else {
        return false;
    }
}

Game.prototype.checkGuess = function() {
    if (this.playersGuess === this.winningNumber) {
        return "You Win!";
    }
    if (this.pastGuesses.indexOf(this.playersGuess) > -1) {
        return "You have already guessed that number.";
    }

    this.pastGuesses.push(this.playersGuess);

    if (this.pastGuesses.length >= 5) {
        return "You Lose.";
    } else if (this.difference() < 10) {
        return "You're burning up!";
    } else if (this.difference() < 25) {
        return "You're lukewarm.";
    } else if (this.difference() < 50) {
        return "You're a bit chilly.";
    } else {
        return "You're ice cold!";
    }
}

Game.prototype.playersGuessSubmission = function(num) {
    if (num < 1 || num > 100 || typeof num != 'number') {
        throw "That is an invalid guess."
    } else {
        this.playersGuess = num;
        return this.checkGuess();
    }
}

Game.prototype.provideHint = function() {
    return shuffle([generateWinningNumber(), generateWinningNumber(), this.winningNumber]);
}

newGame = function() {
    game = new Game;
    return game;
}




$(document).ready(function() { 

    var game = new Game;

    var guessNum

    onSubmit = function(event){
        event.preventDefault();
        var input = $('#player-input');
        var guess = +input.val();
        input.val('');
        var result = game.playersGuessSubmission(guess);

        if (result == 'You have already guessed that number.') {
            $('#title').text(result);
        } else if (result === 'You Win!' || result === 'You lose.') {
            $('#title').text(result);
            $('#subtitle').text('Press the reset button to play again.')
            $('#hint').prop('disabled', true)
            $('#submit').prop('disabled', true)
        } else {
            guessNum = (game.pastGuesses.length - 1).toString();
            $('#l' + guessNum).text(guessNum);
        } 
    };

    $('#submit').on('click', function(e){
        onSubmit(e);
    });

    $('#player-input').on('keypress', function(e) {

        if(e.which == 13) {
            e.preventDefault();
            onSubmit(e);
        };
    });
});
});

Answer 1

You need to escape the CSS selector.

try to replace this line:

$('#' + guessNum).text(guessNum);

with this:

var selector = "#\\" + guessNum.toString().charCodeAt(0).toString(16) + " " + guessNum.toString().substr(1);
$(selector).text(guessNum);

you can read more at: https://www.w3.org/International/questions/qa-escapes