CODEWITHSUNDEEP
javascripthtmlfunctionif-statementconditional-statements
RyHartAttack
RyHartAttack

Reputation: 113

Issues with using conditionals based on user input in JavaScript

I am building a joke website for some friends, and one page on the website I would like to have somewhat of an interactive game. I am used to C++ so the transition to javascript is an interesting one. All I have on the page for now is a paragraph element, a text input box and a button. When the button is clicked it is supposed to call the playGame() function. The playGame function looks at whats in the paragraph element ("game") and then look at the users input and generate the appropriate result. I am just using a set of conditionals to accomplish this but for some reason the function does not seem to change the paragraph element, thus making the entire thing a dud, of gone through and made some revisions but I have not been able to fix the issue. Here is the code:

<html>

<script>

function playGame()
{
   test=document.getElementById("game");
   var userInput=gameInput=document.getElementById("gameInput").value;

   if (test.innerHTML=="Question_1")
      {
         if (userInput.toLowerCase()=="yes")
            {
               test.innerHTML="Ending_Result_1";
            }
         else if (userInput.toLowerCase()=="no")
            {
               test.innerHTML="Question_2";
            }
         else
            {
               test.innerHTML="Ending_Result_2";
            }
      }
   else if (test.innerHTML=="Question_2")
      {
         if (userInput.toLowerCase()=="yes")
            {
               test.innerHTML="Positive_Ending";
            }
         else if (userInput.toLowerCase()=="no")
            {
               test.innerHTML="Ending_Result_3";
            }
         else
            {
               test.innerHTML="Ending_Result_4";
            }
   else
      {
         test.innerHTML="Refresh_page_message";
      }
}
</script>


<head>

<title>CptTuna's Whip or No Whip</title>

</head>

<body>

<p id="game">"Question_1"</p>

<input id="gameInput" type="text">
<button type="button" onclick="playGame()">Answer</button>

</html>

I just changed the actual text content to generic phrases for the sake of appropriateness. Any help on why the function is not executing properly would be greatly appreciated.

Upvotes: 2

Views: 121

Answers (2)

TildalWave
TildalWave

Reputation: 1667

You've just had a few small-ish syntax errors in your code. This works for me:

function playGame() { 
  test=document.getElementById("game");
  var userInput=gameInput=document.getElementById("gameInput").value;

  if (test.innerHTML=="\"Question_1\"") {
    if (userInput.toLowerCase()=="yes") {
      test.innerHTML="Ending_Result_1";
    } else if (userInput.toLowerCase()=="no") {
      test.innerHTML="\"Question_2\"";
    } else {
      test.innerHTML="Ending_Result_2";
    }
  } else if (test.innerHTML=="\"Question_2\"") {
    if (userInput.toLowerCase()=="yes") {
      test.innerHTML="Positive_Ending";
    }  else if (userInput.toLowerCase()=="no") {
      test.innerHTML="Ending_Result_3";
    }  else {
      test.innerHTML="Ending_Result_4";
    }
  } else {
    test.innerHTML="Refresh_page_message";
  }
}

I've took the liberty of re-formatting the code to suit my style better (not to suggest there's something wrong with yours, but to be able to see where you've omitted closing parentheses). Basically, you haven't closed one conditional statement, and you didn't close the whole inner block before your last else either. That threw an error of 'playGame is not defined' in the debugger.

Another point, but not why the code doesn't compile, is that you're not including " quote sign as a string literal in your conditions, where it's a part of your innerHTML contents. Your comparisons would have to look like this: test.innerHTML=="\"Question_1\"" where \ 'backslash' marks a single next character as a string literal to the compiler.

Upvotes: 0

vol7ron
vol7ron

Reputation: 42099

Choose one:

  • Include the quotes ("") in the conditional, or ...
  • remove the quotes from the HTML

'Question_1' != '"Question_1"'
Notice that you can use a combination of single and double quotes to avoid escaping

Upvotes: 2

Related Questions