Ok, digamos que tengo este código HTML y quiero cambiar el encabezado desde dentro del código js, ¿cómo lo haría? He probado varias otras soluciones de otras preguntas y respuestas, pero no parecen funcionar, ya sea que tengo muerte cerebral o estoy atascado. Quiero cambiar el encabezado en función de una variable, así que algo como:
header = variablexyz; <!DOCTYPE html> <html lang="en"> <head> <style> .header { padding: 60px; text-align: center; background: #1746c7; color: white; font-size: 50px; } </style> </head> <body> <div class="header"> <h1>header</h1> <p>-randomly generated username-</p> </div> <script src="script.js"></script> </body> </html>Este bastante simple let header = document.getElementById('header') header.innerHTML = "Hello"
Asigne un nombre de clase o ID a su encabezado <h1 id="idhere">
Para cambiar el texto dentro de la etiqueta h1 (o cualquier elemento) en javascript, primero hace una referencia al elemento. Como su etiqueta h1 no tiene un atributo de id , en su lugar hace referencia a una collection de todos los elementos h1 y hace referencia al primero (único) usando un índice similar a una matriz [0]. Luego puede establecer su propiedad innerText en la variable que contiene el texto que desea mostrar.
Fragmento de trabajo:
let header = "some different Text"; const h1elements = document.getElementsByTagName('h1'); h1elements[0].innerText = header; <div class="header"> <h1>header</h1> <p>-randomly generated username-</p> </div>Para hacer esto, debe asignar a su encabezado una ID como tal: en su HTML
en su encabezado JavaScript = document.getElementById('header-id'); header.innerHTML = "AQUÍ VA EL CAMBIO QUE QUIERES HACER EN EL ENCABEZADO"