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

If your code is in a <script> block before the <body> content, and it's not in a "load" or "ready" handler, then the DOM will be empty and nothing will happen. — Pointy
– Pointy, Commented Jan 30, 2017 at 19:22
I thought that if I invoked the function immediately it would run the code on load and I would not need a ready() function... — MaxPower
– MaxPower, Commented Jan 30, 2017 at 19:25
@AndrewLittle - It probably is, but, if the DOM elements haven't been built yet, then $(".currentWord") and $('.guessRem') will return empty selections and the append() method will not have any elements to append to. — talemyn
– talemyn, Commented Jan 30, 2017 at 19:29

Zakaria Acharki · Accepted Answer · 2017-01-30 19:29:44Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related