javascript hide test/pictures

Question

I use this to hide my answers from the flashcards. However, when I start up the webpage all the answers are showing and I have to manually hide them. HOw do I get everything hidden when I startup or open up the webpage.
I need the answers hidden

  function myShowText(id) {
   document.querySelector('#' + id + ' .answer').style.color = 'black';
}

function myHideText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'white';
}
.answer {
  border-style: solid;
  border-color: #287EC7;
  color: white;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> Flashcards VBA </title>
  <rel="stylesheet" href="css/styles.css">
 </head>

<body>
  <script src="js/scripts.js"></script>
  <h3> Flashcards </h3>
  <p class="question">
    The first question
  </p>

  <div id="bash_start">
    <p class="answer">
      <img src="image.jpg">
    </p>
  </div>
</body>
</html>

Answer 1

Just add display: none in the css.

.answer {
  border-style: solid;
  border-color: #287EC7;
  color: white;
  display: none;
}

Answer 2

Hide the answer on window.onload

 window.onload=function(){
document.querySelector('.answer').style.visibility = "hidden";
}

 window.onload=function(){ document.querySelector('.answer').style.visibility = "hidden"; } function myShowText(id) { document.querySelector('#' + id + ' .answer').style.color = 'black'; } function myHideText(id) { document.querySelector('#' + id + ' .answer').style.color = 'white'; }

 .answer { border-style: solid; border-color: #287EC7; color: white; }

 <html lang="en"> <body> <script src="js/scripts.js"></script> <h3> Flashcards </h3> <p class="question"> The first question </p> <div id="bash_start"> <p class="answer"> <img src="image.jpg"> </p> </div> </body> </html>

Answer 3

You can try the below code. hideAnswers() should be called on page start script. Then you can display answers using showAnswers()

function hideAnswers(){
var answers = document.getElementsByClassName("answer");
  var answer;
  for(var i = 0; i <= answers.length-1; i++){
   answer = answers[i];
   answer.style.visibility = "hidden";
  }
}

function showAnswers(){
var answers = document.getElementsByClassName("answer");
  var answer;
  for(var i = 0; i <= answers.length-1; i++){
   answer = answers[i];
   answer.style.visibility = "visible";
  }
}

javascript hide test/pictures

Question

3 answers

solution1
1 2019-02-13 06:09:04

solution2
0 2019-02-13 06:31:10

solution3
0 2019-02-13 07:20:37

javascript hide test/pictures

Question

3 answers

solution1 1 2019-02-13 06:09:04

solution2 0 2019-02-13 06:31:10

solution3 0 2019-02-13 07:20:37

solution1
1 2019-02-13 06:09:04

solution2
0 2019-02-13 06:31:10

solution3
0 2019-02-13 07:20:37