Javascript help needed!

Posted:
in Genius Bar edited January 2014
Can some knowledgeable coder give me a hand with a Javascript function? I'm new to this and just can't seem to find a tutorial that shows how to do it.



I want to put some multiple-choice quiz questions on my site and rather than using form textarea elements to display the answers and explanations, I would like to hide a <div> element containing regular text, then show it when the user clicks a button. I've worked out how to hide the text initially by setting the visibility of the <div>"box1" to "hidden" in my stylesheet, but I can't figure out how to write the function that would change the text visibility to "visible" when the user clicks the "Show Answer" button. I'm looking for a solution that would work for more than one question per page and I need both the function and the button script. Does anyone have the answer?



Thanks in advance for your advice.

Comments

  • Reply 1 of 2
    What you need to do is to give each div an id (<div id="me">), and then use the document.getElementById method. Here is a quick example:





    <html>

    &nbsp;&nbsp;<body>

    &nbsp;&nbsp;&nbsp;&nbsp;<div id="bob" style="visibility: hidden">

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;whatever

    &nbsp;&nbsp;&nbsp;&nbsp;</div>

    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="poof!" onClick="document.getElementById('bob').style.visi bility = 'show'">

    &nbsp;&nbsp;</body>

    </html>
  • Reply 2 of 2
    Lovely! It worked (of course). Thank you so much, Karl!



    Your example is so nicely simple and light. I had tried the "document.getElementById" method in a longer script copied from a book, but I think I didn't use it correctly ("A little knowledge is a dangerous thing."). I like your script much better.



    I'm very grateful for your help. It really made my day.



    Azuma





    Quote:

    Originally posted by Karl Kuehn

    What you need to do is to give each div an id (<div id="me">), and then use the document.getElementById method. Here is a quick example:



    <snip>







Sign In or Register to comment.