Localizing a javascript function

Question

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>

Velusamy Venkatraman · Accepted Answer · 2018-05-21 04:55:45Z

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>

Alex Carlson · Accepted Answer · 2018-05-21 04:59:35Z

0

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">

answered May 21, 2018 at 4:59

Alex Carlson

999 bronze badges

Collectives™ on Stack Overflow

Localizing a javascript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related