CODEWITHSUNDEEP
javascriptjquery
MaxPower
MaxPower

Reputation: 367

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

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

Upvotes: 3

Views: 262

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 2

Related Questions