Skip to content

Show GIF and text, only when button is clicked

When I click the button the image does not show up along with the text, this is what I have tried so far:

<!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) 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>