Para el desafío de edad en días en este video, recibo el siguiente error:
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at yearBorn (script.js:10:47) at HTMLButtonElement.onclick (challenge.html:19:64) yearBorn @ script.js:10 onclick @ challenge.html:19JS:
function año de nacimiento() {
var birthYear = prompt('What year were you born?'); var ageInDays = (2022 - birthYear) \* 365; var h1 = document.createElement('h1'); var textAnswer = document.createTextNode('You are ' + ageInDays + ' days old'); h1.setAttribute('id', 'yearBorn'); h1.appendChild(textAnswer); document.getElementById('flex-box-result').appendChild(h1);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" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <title>Javascript Challenge</title> <link rel="stylesheet" href="static/css/index.css" </head> <body> <div class="container-1"> <h2>Challenge 1: Your Age in Days</h2> <div class="flex-box-container-1"> <div> <button class="btn btn-primary" onclick="yearBorn()">Click Me</button> </div> <div> <button class="btn btn-danger">Reset</button> </div> </div> <div class="flex-box-container-1"> <div class="flex-box-result"></div> </div> </div> <script src="static/js/script.js"></script> </body> </html>¿Por qué recibo el error?
Esperaba la edad en días para imprimir en el contenedor de la caja flexible debajo de los botones del documento. En cambio, obtener el error
Solución 1 El error en esta línea
document.getElementById('flex-box-result').appendChild(h1)Porque document.getElementById() necesita una identificación que proporcione al crear un elemento html como este
<div id="id"></div>Tu resultado de caja flexible es una clase
<div class="flex-box-result"></div>a
<div class="flex-box-result"></div>Solución 2 En el código JavaScript, también puede usar un método querySelector con el selector de su elemento (como el selector CSS)
document.querySelector('.flex-box-result').appendChild(h1)