Cuando hago clic en el botón, la imagen no aparece junto con el texto, esto es lo que he intentado hasta ahora:
<!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>1) TYPO: No hay ningún método como getElementByClassName , en su lugar es getElementsByClassName .
2) getElementsByClassName devolverá una estructura de datos similar a una matriz, por lo que debe buscar la referencia del elemento HTML usando index
const result = document.getElementsByClassName( 'results' ); const loading = document.getElementsByClassName( 'loading' ); function displayRoutine() { loading[0].style.display = 'block'; result[0].style.display = "block"; } 3) Dado que solo tiene un elemento HTML de loading en HTML, puede usar querySelector como:
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>Agregue el enlace a su imagen gif y copie y pegue el código del script para eliminar los errores tipográficos.
<script > function displayRoutine(){ document.getElementsByClassName('results')[0].style.display='block'; document.getElementsByClassName('loading')[0].style.display='block'; alert('me'); }</script>