Why is .append() not working in my code?

Question

I am so confused. I have used this jquery feature for a while now and it will not work here. It returns the right value and prints out to the console but it wont append the data on page load.

HTML :

<div class="row">
    <div class="col-xs-12">
        <span>Press any key to get started!</span>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <span>Wins</span>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div>Current word: </div>
        <br>
        <div class="currentWord"></div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <span class="guessRem">Number of guesses remaining:</span>
    </div>
</div>

JS :

var hangmanWords = ["baseball", "programming", "movies", "america",   "lakers", "gardening"];
var wins = 0;
var remainingGuesses = 12; 

function selectAWord (){
  var randomVal = hangmanWords[Math.floor(Math.random() * hangmanWords.length)].toString();

  $(".currentWord").append(randomVal);
  $('.guessRem').append(remainingGuesses);

  console.log(randomVal);
  return (randomVal);
}
selectAWord();

Answer 1

Try to use the ready function so the DOM will be fully loaded and your elements .currentWord/.guessRem are there for the .append :

$(function(){
    //Your function call here
    selectAWord();
})

Hope this helps.

 $(function(){ selectAWord(); }) function selectAWord (){ var hangmanWords = ["baseball", "programming", "movies", "america", "lakers", "gardening"]; var wins = 0; var remainingGuesses = 12; var randomVal = hangmanWords[Math.floor(Math.random() * hangmanWords.length)].toString(); $(".currentWord").append(randomVal); $('.guessRem').append(remainingGuesses); console.log(randomVal); return (randomVal); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-12"> <span>Press any key to get started!</span> </div> </div> <div class="row"> <div class="col-xs-12"> <span>Wins</span> </div> </div> <div class="row"> <div class="col-xs-12"> <div>Current word: </div> <br> <div class="currentWord"></div> </div> </div> <div class="row"> <div class="col-xs-12"> <span class="guessRem">Number of guesses remaining:</span> </div> </div>