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

只需在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 个答案: