CODEWITHSUNDEEP
javascripthtmlcss
capser
capser

Reputation: 2645

Javascript hide picture

I use these flashcards quite regularly. Lately, I have been using pictures as answers. However -I cannot hide the pictures. I would like for the pictures to be hidden upon webpage startup. 

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>

Upvotes: 0

Views: 91

Answers (2)

Pingolin
Pingolin

Reputation: 3417

Just add the following CSS class:

.hidden {
    display: none;
}

and add the class .hidden to your answer:

<p class="answer hidden">
    <img src="image.jpg">
</p>

Then remove this .hidden class whenever your want to show the answer:

document.querySelector('.answer').classList.remove('hidden');

Here is a working example:

var button = document.querySelector('button');
var answer = document.querySelector('.answer');

button.addEventListener('click', function() {
  answer.classList.remove('hidden');
});
.hidden {
  display: none;
}
<button type="button">Show answer</button>

<p class="answer hidden">This is the answer</p>

Upvotes: 1

Killick
Killick

Reputation: 288

If I understand correctly you just want your image to be hidden when the user load the page ? In that case juste put somme css on your image(s) visibility: hidden; or display: none;

Then Javascript/Jquery side you do whatever event you want to fire it and change visibility: visible; or display: block/inline-block;.

<img class="flashCards" src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png">
<button id="validate_btn" onclick="validate()">Validate</button>

<style>

img.flashCards { width: 150px; visibility: hidden; }
</style>

<script>
function validate() {
  var flashCards = document.getElementsByClassName('flashCards');
  //Need a for loop for each image element
  //If only one image use getElementById directly with the style
  for(i=0;i<flashCards.length;i++) {
    flashCards[i].style.visibility = 'visible';
    flashCards[i].style.backgroundColor = 'green';
  }
}
</script>

Upvotes: 0

Related Questions