CODEWITHSUNDEEP
javascript
capser
capser

Reputation: 2635

Localizing a javascript function

When I click on any of the buttons, the only text that hides or unhides is the first answer. I want the button to deal with the local answer. Like the buttons next to question on should only operate on answer one, and the button next to answer 2 should only hide or unhide question 2. I would rather not use get element by id for each question. 

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Book Title</title>
  <script>
   function showFunction() {
       var x = document.getElementsByClassName("answer")[0].style.color = 'black'
   }
   function hideFunction() {
      var x = document.getElementsByClassName("answer")[0].style.color = 'white'
   }
  </script>
  <style>
  </style>
  </head>
  <body>

 <h3> Flashcards </h3>


 <p class="question">
 This is the First Question
 </p>

 <div class="answer">
 <p>
 This is the First Answer
 </p>
 </div>

 <div>
 <label>Check Answer:</label>
 <button  onclick="showFunction()">Show Answer</button>
 <button  onclick="hideFunction()">Hide Answer</button>
 </div>

 <p class="question">
 This is the Second Question
 </p>

 <p class="answer" >
 This is the Second Answer
 </p>
 <br />
 <div>
 <label>Check Answer:</label>
 <button  onclick="showFunction()">Show Answer</button>
 <button  onclick="hideFunction()">Hide Answer</button>
 </div>

 <p class="question">
 This is the Thrird Question
 </p>
 <p class="answer">
 This is the Third Answer
 </p>
 <br />
 <div>
 <label>Check Answer:</label>
 <button  onclick="showFunction()">Show Answer</button>
 <button  onclick="hideFunction()">Hide Answer</button>
 </div>

 </body>
 </html>

Upvotes: 0

Views: 45

Answers (2)

Alex Carlson
Alex Carlson

Reputation: 99

If you are trying to hide things then use a hidden on each div 

<div id="string" hidden>

if you want to hide a whole div when a button is pushed I would recommend this line of coding 

                var x = document.getElementById("Section_1");
                x.style.display = 'none';
                var x = document.getElementById("Section_2")
                x.style.display = 'block'

'none' will hide a section if you have the correct id and block will reveal a section as needed.

If you are just changing font colors then 

<font color="string">

Upvotes: 0

Velusamy Venkatraman
Velusamy Venkatraman

Reputation: 736

I hope it will helps to you

   function showFunction(val) {
       var x = document.getElementsByClassName("answer"+val)[0].style.color = 'black'
   }
   function hideFunction(val) {
      var x = document.getElementsByClassName("answer"+val)[0].style.color = 'white'
   }
 <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Book Title</title>
  <style>
  </style>
  </head>
  <body>

 <h3> Flashcards </h3>


 <p class="question">
 This is the First Question
 </p>

 <div class="answer1">
 <p>
 This is the First Answer
 </p>
 </div>

 <div>
 <label>Check Answer:</label>
 <button  onclick="showFunction(1)">Show Answer</button>
 <button  onclick="hideFunction(1)">Hide Answer</button>
 </div>

 <p class="question">
 This is the Second Question
 </p>

 <p class="answer2" >
 This is the Second Answer
 </p>
 <br />
 <div>
 <label>Check Answer:</label>
 <button  onclick="showFunction(2)">Show Answer</button>
 <button  onclick="hideFunction(2)">Hide Answer</button>
 </div>

 <p class="question">
 This is the Thrird Question
 </p>
 <p class="answer3">
 This is the Third Answer
 </p>
 <br />
 <div>
 <label>Check Answer:</label>
 <button  onclick="showFunction(3)">Show Answer</button>
 <button  onclick="hideFunction(3)">Hide Answer</button>
 </div>

 </body>
 </html>

Upvotes: 1

Related Questions