Having trouble with complex strings

[aooga]

I want to be able to click a button and display a whole bunch and then click another button and get display something else. It's not really working. Any tutorials / examples on doing something like this? The biggest problem I have is reproducing single ' and double " quotes effectively, there must be an easier way to do this!

Thank you! Here's my code:

 

<script type="text/javascript">

function newfirstquestion()

{

var x = "<p>Question:</p>";

x += '<textarea name = "question" rows="4" cols="80"></textarea>';

x += "<p>Answer:</p>";

x += '<textarea name = "answer" rows="4" cols="80"></textarea> <br />';

x += '<input type="submit" name="form" onclick="document.getElementById(';

x += "'firstquestion').innerHTML=<span onclick=";

x += '"document.getElementById(';

x += "'firstquestion').innerHTML=newfirstquestion();";

x += '" id="firstquestion"><p>NEW FIRST QUESTION</p></span>';

x += ' | ';

x += '<input type="submit" name="form" value="CANCEL" />';

return x;

}

</script>

<span onclick="

document.getElementById('firstquestion').innerHTML=newfirstquestion();

" id="firstquestion"><p>NEW FIRST QUESTION</p></span>

 

[KevinM1]

Well, there are several things going on here, none of them good, I'm afraid.

 

First, I don't see why you're trying to create the rest of the form line-by-line in your JavaScript.  It seems as though you want a 'button' (I'm using the term loosely...it could be any element) to toggle the display of that part of the form.  Am I correct in that assumption?  If so, there's a much easier way to do it.

 

Secondly, your function calls aren't making any sense.  In particular, you're attempting to set an element's HTML to another element's onclick handler...it's a sloppy way to do things, regardless of whether or not the quotes are right.

 

Third, from an HTML point of view, you're putting block elements (<p>, <textarea>) within a inline element (<span>).  That kind of defeats the point.

 

I have the feeling you want something like:

<script type="text/javascript">
   window.onload = function()
   {
      var firstToggle = document.getElementById('firstToggle');
      var firstQuestion = document.getElementById('firstQuestion');

      firstToggle.onclick = function()
      {
         firstQuestion.style.display = (firstQuestion.style.display != 'none' ? 'none' : ''); //<--- two single quotes
      }
   }
</script>

<!-- in your HTML -->

<form name="questions" action="#" method="post">
   <h3 id="firstToggle">FIRST QUESTION:</h3>
   <div id="firstQuestion">
      <p>Question:</p>
      <textarea name="question" rows="4" cols="80"></textarea>
      <p>Answer:</p>
      <textarea name="answer" rows="4" cols="80"></textarea><br />
      <input type="submit" name="submit" value="Submit" />
      <input type="submit" name="cancel" value="Cancel" />
   </div>
</form>

 

I've taken the liberty of fixing the several HTML errors you had, as well.

[aooga]

Thank you, I think you've really hit the nail on the head as to what I was trying to do and what was wrong about it. Basically I know how to do very few things in javascript and am trying to hack my way into doing certain elementary things with what I know. I'm going to work more on this. Do you know of any good online resources for these types of things? W3schools sometimes seems kind of perfunctory...

Anyways, thanks a whole bunch!

[KevinM1]

Thank you, I think you've really hit the nail on the head as to what I was trying to do and what was wrong about it. Basically I know how to do very few things in javascript and am trying to hack my way into doing certain elementary things with what I know. I'm going to work more on this. Do you know of any good online resources for these types of things? W3schools sometimes seems kind of perfunctory...

Anyways, thanks a whole bunch!

 

Unfortunately, I haven't found any real decent online sources that cover what I'd consider best JavaScript practices.  At least, no one source.  A few good sources are QuirksMode and Dustin Diaz's blog (a google search for each should yield the desired result).

 

W3schools leaves a bad taste in my mouth.  It's decent as a "What was the name of that function?" resource, but it shouldn't be used as an actual primer on any language.  Unfortunately, many people do tend to use it as their primary learning source, most likely because they haven't found anything better.

 

Your best bet is to get a good book or two.  I always recommend John Resig's Pro JavaScript Techniques, but it may be too advanced for you at this stage.  I started with Danny Goodman's JavaScript and DHTML Cookbook.  It's not great, but it teaches the basics.  It may be a bit outdated, now, though.  A lot of it is focused on getting older browsers to behave properly.  I'm not sure it that's much of a concern any more.  Unless you're working for a charity or government site, I doubt you'd want to jump through the hoops necessary to get things working correctly in, say, IE 5.