javascript隐藏测试/图片

Question

我用它从抽认卡中隐藏我的答案。 但是，当我启动网页时，所有答案都会显示出来，我必须手动隐藏它们。 启动或打开网页时，如何隐藏所有内容。
我需要隐藏答案

  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

只需添加display: none css中display: none 。

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

Answer 2

隐藏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

您可以尝试以下代码。 hideAnswers（）应该在页面开始脚本中调用。 然后您可以使用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隐藏测试/图片

问题描述

3 个解决方案

解决方案1
1 2019-02-13 06:09:04

解决方案2
0 2019-02-13 06:31:10

解决方案3
0 2019-02-13 07:20:37

javascript隐藏测试/图片

问题描述

3 个解决方案

解决方案1 1 2019-02-13 06:09:04

解决方案2 0 2019-02-13 06:31:10

解决方案3 0 2019-02-13 07:20:37

解决方案1
1 2019-02-13 06:09:04

解决方案2
0 2019-02-13 06:31:10

解决方案3
0 2019-02-13 07:20:37