Databases
StackOverflow2013
Postsdbo
POMultiple buttons on an html page to reveal text step by step rather than simultaneously?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple buttons on an html page to reveal text step by step rather than simultaneously?
    text
    copied!<p>trying to create a list of about 7 questions with a click to reveal answer button next to each question. only problem is when i click one button, it runs the entire js code and shows ALL the answers not just that particular one.</p> <p>here is my code</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td&gt;Question 1 &lt;/td&gt; &lt;td class = "aligncenter"&gt; &lt;form action="javascript:void(0);"&gt; &lt;div id="reveal-space"&gt; &lt;input type="submit" name="b1" value="1" class="submitbutton aligncenter"/&gt; &lt;/div&gt; &lt;/form&gt; &lt;script&gt; $("form").submit(function() { $("#reveal-space").text("Answer 1").show(); return true; }); &lt;/script&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Question 2&lt;/td&gt; &lt;td class = "aligncenter"&gt; &lt;form action="javascript:void(0);"&gt; &lt;div id="reveal-space1"&gt; &lt;input type="submit" name="b2" value="2" class="submitbutton aligncenter"/&gt; &lt;/div&gt; &lt;/form&gt; &lt;script&gt; $("form").submit(function() { $("#reveal-space1").text("Answer 2").show(); return true; }); &lt;/script&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Question 3&lt;/td&gt; &lt;td class = "aligncenter"&gt; &lt;form action="javascript:void(2);"&gt; &lt;div id="reveal-space2"&gt; &lt;input type="submit" name="b3" value="3" class="submitbutton aligncenter"/&gt; &lt;/div&gt; &lt;/form&gt; &lt;script&gt; $("form").submit(function() { $("#reveal-space2").text("Answer 3").show(); return true; }); &lt;/script&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Question 4&lt;/td&gt; &lt;td class = "aligncenter"&gt; &lt;form action="javascript:void(0);"&gt; &lt;div id="reveal-space3"&gt; &lt;input type="submit" name="b4" value="4" class="submitbutton aligncenter"/&gt; &lt;/div&gt; &lt;/form&gt; &lt;script&gt; $("form").submit(function() { $("#reveal-space3").text("Answer 4").show(); return true; }); &lt;/script&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>how do i fix it to make it so that when the "1" button is clicked it doesn't reveal the texts to the other buttons ? i may need to take an entirely different approach</p> <p>thanks for the help in advance </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload