Javascript help needed!
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.
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
<html>
<body>
<div id="bob" style="visibility: hidden">
whatever
</div>
<input type="button" value="poof!" onClick="document.getElementById('bob').style.visi bility = 'show'">
</body>
</html>
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
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>