What I want to do with this exercise is to show the gif and the text only when I click on the button

37
September 24, 2021, at 2:00 PM

1.Hi guys, this is a little exercise that I do so I have fun and learn a bit, what I want the code to do is that when I click on the button, the image showes up alonng with the text. many thanks!!!


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .results, .loading{
    display:none;
  }
</style>
<body>
   <div class="container" style="margin-left:35%; margin-top:20%;">
  <button class="btn" onclick="displayRoutine()" >Click to see me doing my morning routine</button>
  <div class="loading">
  <img src="-here is a GIF link" >
  </div>
  <div class="results">
    <div class="me">
      <p style="margin-left:50px;">This is me getting up!!!</p>
    </div>
  </div>
</div>
<script >
function displayRoutine(){
  
  document.getElementByClassName('results').style.display = 'block';
  
  
  document.getElementByClassName('loading').style.display = 'block';
  alert('me');
}
</script>
</body>
</html>
Answer 1

1) TYPO: There is no method as getElementByClassName, instead it is getElementsByClassName.

2) getElementsByClassName will return an array-like data structure, so you have to fetch the HTML element reference using index

const result = document.getElementsByClassName( 'results' );
const loading = document.getElementsByClassName( 'loading' );
function displayRoutine() {
    loading[0].style.display = 'block';
    result[0].style.display = "block";
}

3) Since you have only one loading HTML element in HTML, so you can just use querySelector as:

document.querySelector('.results')

const result = document.querySelector('.results');
const loading = document.querySelector('.loading');
function displayRoutine() {
  loading.style.display = 'block';
  result.style.display = "block";
}
.results,
.loading {
  display: none;
}
<div class="container" style="margin-left:35%; margin-top:20%;">
  <button class="btn" onclick="displayRoutine()">Click to see me doing my morning routine</button>
  <div class="loading">
    <img src="-here is a GIF link">
  </div>
  <div class="results">
    <div class="me">
      <p style="margin-left:50px;">This is me getting up!!!</p>
    </div>
  </div>
</div>

Answer 2

Add the link to your gif image and copy paste the script code to remove typo errors.

<script >
function displayRoutine(){
document.getElementsByClassName('results')[0].style.display='block';
document.getElementsByClassName('loading')[0].style.display='block';
alert('me');
}</script>
READ ALSO
JS Script POST&#39;s a different/wrong ID to another file in PHP

JS Script POST's a different/wrong ID to another file in PHP

My Problem: I have a dropdown menu in a column, which (or should) updates either a yes or no in the DB table

77
How to access torch (flashlight) using javascript or jquery?

How to access torch (flashlight) using javascript or jquery?

I am using the html5-qrcode barcode scanner library based on zxing and everything is working fine

73
LinkedLIst and Switch Case Java to add middle string [closed]

LinkedLIst and Switch Case Java to add middle string [closed]

Want to improve this question? Add details and clarify the problem by editing this post

62
SVG `fill` overlaps `stroke`

SVG `fill` overlaps `stroke`

Having a circle it has fill and strokeBut I see that fill color overlaps little bit stroke

82