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

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>

CodePudding user response：

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>

CodePudding user response：

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>