Cuando la cuenta regresiva llegue a su fin, quiero hacer visibles los encabezados h1[1] y h1[2] y ocultar h1[0]. Lo hice de la manera que se indica a continuación en el segmento de código javasript, pero h1[1] y h1[2] no se hacen visibles. Por favor, alguien señale mi error y cómo solucionarlo.
JAVASCRIPT
document.body.querySelector("h1").textContent = "HAPPY NEW YEAR"; document.body.getElementsByTagName("h1")[1].style.display = inline; //Not working document.body.getElementsByTagName("h1")[2].style.display = inline; //Not workingHTML
<body> <h1>New Year Countdown</h1> <h1 style="display:none">HAPPY NEW YEAR</h1> <br> <h1 style="display:none">WELCOME 2023!</h1> <div class=" container" id="countdown"> <div class=" row" id="time"> <div class="col" id="days"> <h2>00</h2> <h6>DAYS</h6> </div> <div class="col" id="hours"> <h2>00</h2> <h6>HOURS</h6> </div> <div class="col" id="minutes"> <h2>00</h2> <h6>MINUTES</h6> </div> <div class="col" id="seconds"> <h2>00</h2> <h6>SECONDS</h6> </div> </div> </div> <script src="source.js"></script> </body>puede agregar una ID a su H1 y usar getElementsById('h1-id')
y luego actualice visibility: hidden .
Entiendo el problema al que te enfrentas. primero intente eliminar el css en línea que está aplicando en el archivo html y cambie eso a <style></style> dentro de la sección <header></header> del documento html, hacemos esto porque inline-css se proporciona más importancia que otra forma de estilo que inyecte en el documento.
html
<h1 class="headers" id="new_year_cntdwn">New Year Countdown</h1> <h1 class="headers">HAPPY NEW YEAR</h1> <br> <h1 class="headers">WELCOME 2023!</h1>Agrega el CSS
.headers{ display: none; } #new_year_cntdwn{ display: inline; }Y para la parte de JavaScript, intente usar esto después de eliminar el css en línea
Aquí iteramos a través de la matriz (aquí la matriz de encabezado que se está seleccionando) si desea obtener más información sobre los métodos querySelectorAll o forEach intente consultar https://developer.mozilla.org/en-US/
document.querySelectorAll(".headers").forEach(header=>header.style.display="block") document.querySelector("#new_year_cntdwn").style.display="none"