Im trying to match the value of a clicked element

Question

In the .body click handler function I am trying to take in the value of the clicked element and check it against the question's correctAnswer.

I think the problem is that I am not correctly getting the value of the clicked element.

I tried to do it with this line: var playerGUess = $(this).val() but i think i am missing something in .val().

// Create global variables for correct answers,  incorrect guesses
var correctGuesses = 0;
var incorrectGuesses = 0;
var timeLeft = 30;
var questionCounter = 0;
var gameWin = false;


// Create an object containing: All questions, correct answers and 3 incorrect answers for every question. Add an interesting fact about the answer
// (3 false and 1 true) 

// questions, answers,  wrong guesses, true or false
var quizItems = [{
    question: "What swimming stroke is named after an insect?",
    correctAnswer: "Butterfly",
    incorrect1: "Bee",
    incorrect2: "Cricket",
    incorrect3: "Wasp"
  },

  {
    question: "The largest member of the salmon family lives in the Pacific Ocean, weighs up to 120 pounds, and is known as what?",
    correctAnswer: "White Sturgeon",
    answers: ["Tuna", "Cod", "Bass", "White Sturgeon"],
  },

  {
    question: "According to the San Francisco Department of Animal Care and Control, what is the most commonly reported wild animal sighted by people in the streets of San Francisco?",
    correctAnswer: "Raccoon",
    incorrect1: "Rat",
    incorrect2: "Possum",
    incorrect3: "Fox"
  },

  {
    question: "What substance can you drop onto a scorpions head to make it sting itself to death?",
    correctAnswer: "Alcohol",
    incorrect1: "Cider",
    incorrect2: "Vinegar",
    incorrect3: "Bleach"
  },

  {
    question: "Cows have sweat glands in what part of their bodies? ",
    correctAnswer: "Nose",
    incorrect1: "Tongue",
    incorrect2: "Ears",
    incorrect3: "Feet"
  }
];

console.log("Question: " + quizItems[questionCounter].question);
console.log("Answer: " + quizItems[questionCounter].correctAnswer);


$("#start-button").on("click", function() {

  // Timer
  setInterval(countdown, 1000);
  $("#timer").text(timeLeft);

  // Display Questions
  $("#question-area").text(quizItems[questionCounter].question);
  $("#answer1").text(quizItems[questionCounter].incorrect1);
  $("#answer2").text(quizItems[questionCounter].incorrect2);
  $("#answer3").text(quizItems[questionCounter].incorrect3);
  $("#answer4").text(quizItems[questionCounter].correctAnswer);



  // add event listener to all of the answers
  // Whenever any answer is clicked, do questionCounter++ so the next answers can be displayed
  // Same for timer
});


//Click events for all the guesses
$('body').on('click', '.answer', function() {

  var playerGUess = $(this).val();

  //Check the value of the button pressed to see if its right or wrong
  if (playerGUess === quizItems[questionCounter].correctAnswer) {
    console.log("Correct");
  } else {
    console.log("incorrect");
  }

});



// Countdown Timer Function
function countdown() {
  if (timeLeft === 0) {

  } else {
    timeLeft--;
    $("#timer").text(timeLeft);
    console.log(timeLeft);
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="gameContainer">
  <a class="btn btn-primary btn-lg" href="#" role="button" id="start-button">Start Game</a>
  <div id="mainGame">
    <div id="timer"></div>
    <div id="question-area"></div>
    <div id="answers-area">
      <div id="answer1" class="answer"></div>
      <div id="answer2" class="answer"></div>
      <div id="answer3" class="answer"></div>
      <div id="answer4" class="answer"></div>
    </div>
  </div>
</div>

[It is really hard to answer a question about a bug in code when the question includes a huge block of code. When this happens, it takes much longer and is much more difficult for other users to search through the code to find the pieces that are relevant to the problem.](http://idownvotedbecau.se/toomuchcode/). Please create a [**MINMAL**, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) of your problem — Liam, Sep 26 '18 at 15:40
You have a body closing tag, but not a body opening tag, as far as I can see. Although as per @Liam's comment, that may be because it's very difficult to read. — cmprogram, Sep 26 '18 at 15:42

ksav · Accepted Answer · 2018-09-26T16:40:29.693

Have a look at this question for a discussion around the difference between .text() and .val()

val()

Get the content of the value attribute of the first matched element

text()

Get the combined text contents of each element in the set of matched elements, including their descendants

Your clicked div doesn't have a value attribute, so we must use .text().

Here is your example correctly matching to correctAnswer

// Create global variables for correct answers,  incorrect guesses
var correctGuesses = 0;
var incorrectGuesses = 0;
var timeLeft = 30;
var questionCounter = 0;
var gameWin = false;


// Create an object containing: All questions, correct answers and 3 incorrect answers for every question. Add an interesting fact about the answer
// (3 false and 1 true) 

// questions, answers,  wrong guesses, true or false
var quizItems = [{
    question: "What swimming stroke is named after an insect?",
    correctAnswer: "Butterfly",
    incorrect1: "Bee",
    incorrect2: "Cricket",
    incorrect3: "Wasp"
  },

  {
    question: "The largest member of the salmon family lives in the Pacific Ocean, weighs up to 120 pounds, and is known as what?",
    correctAnswer: "White Sturgeon",
    answers: ["Tuna", "Cod", "Bass", "White Sturgeon"],
  },

  {
    question: "According to the San Francisco Department of Animal Care and Control, what is the most commonly reported wild animal sighted by people in the streets of San Francisco?",
    correctAnswer: "Raccoon",
    incorrect1: "Rat",
    incorrect2: "Possum",
    incorrect3: "Fox"
  },

  {
    question: "What substance can you drop onto a scorpions head to make it sting itself to death?",
    correctAnswer: "Alcohol",
    incorrect1: "Cider",
    incorrect2: "Vinegar",
    incorrect3: "Bleach"
  },

  {
    question: "Cows have sweat glands in what part of their bodies? ",
    correctAnswer: "Nose",
    incorrect1: "Tongue",
    incorrect2: "Ears",
    incorrect3: "Feet"
  }
];

console.log("Question: " + quizItems[questionCounter].question);
console.log("Answer: " + quizItems[questionCounter].correctAnswer);


$("#start-button").on("click", function() {

  // Timer
  setInterval(countdown, 1000);
  $("#timer").text(timeLeft);

  // Display Questions
  $("#question-area").text(quizItems[questionCounter].question);
  $("#answer1").text(quizItems[questionCounter].incorrect1);
  $("#answer2").text(quizItems[questionCounter].incorrect2);
  $("#answer3").text(quizItems[questionCounter].incorrect3);
  $("#answer4").text(quizItems[questionCounter].correctAnswer);



  // add event listener to all of the answers
  // Whenever any answer is clicked, do questionCounter++ so the next answers can be displayed
  // Same for timer
});


//Click events for all the guesses
$('body').on('click', '.answer', function() {

  var playerGUess = $(this).text();

  //Check the value of the button pressed to see if its right or wrong
  if (playerGUess === quizItems[questionCounter].correctAnswer) {
    console.clear()
    console.log("Correct");
  } else {
    console.clear()
    console.log("incorrect");
  }

});



// Countdown Timer Function
function countdown() {
  if (timeLeft === 0) {

  } else {
    timeLeft--;
    $("#timer").text(timeLeft);
    //console.log(timeLeft);
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="gameContainer">
  <a class="btn btn-primary btn-lg" href="#" role="button" id="start-button">Start Game</a>
  <div id="mainGame">
    <div id="timer"></div>
    <div id="question-area"></div>
    <div id="answers-area">
      <div id="answer1" class="answer"></div>
      <div id="answer2" class="answer"></div>
      <div id="answer3" class="answer"></div>
      <div id="answer4" class="answer"></div>
    </div>
  </div>
</div>

smacaz · Answer 2 · 2018-10-01T13:50:27.287

0

$('.answer').click(function(e){
    var playerGUess = $(e.target).text();
    /* continue with if condition */
});

Simply use jquery eq function or event dot target. so in your case: (1) an attempt has been made a click, check if correct (2) Get the tex: if event dot target dot text equals sth (do sth) also check that they are clicking the right thing, by checking the class you are concerned with or: Selector dot eq 0 dot click function, if this dot text is equal to that, do sth. and you"ll repeat this for eq 1 eq 2 and eq 3 because you have 4 divs or buttons for options please google jquery event target and eq functions for how to use.

edited Oct 01 '18 at 13:50

answered Sep 26 '18 at 16:04

smacaz

148
8

1

You've gone to a great deal of effort to describe what the code should look like using text, why not just add the code? – Liam Sep 28 '18 at 08:35
I was using my phone to answer, I'd add code shortly – smacaz Oct 01 '18 at 10:51

Im trying to match the value of a clicked element

2 Answers2