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>Advertisement
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>