current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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.

share|improve this question
1  
Like this: jsfiddle.net/j08691/hKYgy? –  j08691 Feb 24 '13 at 18:20
    
Yes that is exactly how I want it to work, what is the significance of adding the "\" in the conditional? –  RyHartAttack Feb 24 '13 at 18:34

2 Answers 2

up vote 0 down vote accepted

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.

share|improve this answer
    
I am a little confused, what do you mean by I didn't close any conditionals? I could very well just be completely overlooking what you are talking about, in which case I apologize haha, but it seems to me that we have the same amount of curly braces and parenthesis in both your and my version of the code, the only difference I notice is the formatting. Again I am probably missing something glaringly obvious –  RyHartAttack Feb 24 '13 at 18:36
    
@RyHartAttack - Your formatting is acceptable and I've later also tested your code style with added corrections and it worked. In a nutshell, you don't have to use your begin { and end } curly brackets in the same line as the conditional statement. But if you observe your code immediately before your last else block, you forgot to close the whole previous block with }. Your code sample can not have the same number of brackets than mine simply because it's having more opening ones than the closing ones. Count them by adding +1 each time you open a new one and -1 each time you close one. –  TildalWave Feb 24 '13 at 18:43
    
Thank you, I noticed after I started to reformat my code to look like yours, I noticed the missing '{'. That was the main problem, may I ask what you use to debug your javascript code? I have just been writing in notepad which isn't very efficient haha. –  RyHartAttack Feb 24 '13 at 18:54
    
@RyHartAttack - Several browsers come with developers tools. I most frequently use Chrome's built in console (CTRL+SHIFT+J), but similar can also be found in Firefox and others by using same keyboard combination. Chrome has a nice debugger with all the common debugging features such as Expressions Watch, Call Stack/Scope Variables inspectors, Breakpoints,... ;) –  TildalWave Feb 24 '13 at 18:58
up vote 2 down vote

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

share|improve this answer
    
or use \ backslash to mark a string literal character where ("\"" == '"'). Escaping characters is probably a better option as you'll sooner or later run out of acceptable quote characters. ;) EDIT: like this comment parser just did LOL –  TildalWave Feb 24 '13 at 18:50
    
Thank you, a frequent mistake I make when writing html is putting in unnecessary quotes. I do it in the <title> and apparently in <p>'s as well. Thank you for pointing that out, this made my conditional function properly –  RyHartAttack Feb 24 '13 at 18:52
    
@TildalWave: backslashes are ugly and make reading code a little more difficult; I avoid them whenever possible. If you do any regex, you'll understand how much cleaner and more readable things are when you don't have `` in front of it –  vol7ron Feb 24 '13 at 18:56
    
@vol7ron - Well to each their own I guess, but I can't avoid using them when for example parsing JS through a CGI app, say as a AJAX type response. Anyway, it's good to know there's this escaping option. Personally, I don't find it to be ugly, and quite the opposite when I run out of string literal markers when passing parameter values back and forth. For basic JS functions, it might not be needed though, that's true. Anyway, cheers for your comment and a +1 from me! ;) –  TildalWave Feb 24 '13 at 19:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.