Quiero cambiar una cierta parte del texto, llamada "cuadro" en html a un color diferente cuando se hace clic en un botón "btn" con javascript.
Pero aparece el error "Error de tipo no capturado: no se pueden leer las propiedades de undefined (leyendo 'estilo')".
Esto es lo que hice en js:
const btn = document.getElementById('btn'); const box = document.getElementById('box'); btn.addEventListener('click', function onClick(event) { document.box.style.color = 'black'; });Revisé diferentes sitios web y para otros casos, este código parece funcionar. ¿Alguien puede decirme dónde me equivoqué? ¡Gracias!
corrija la cuarta línea de su código para
box.style.color = 'black'; const btn = document.getElementById('btn'); const box = document.getElementById('box'); btn.addEventListener('click', function onClick(event) { box.style.color = 'blue'; }); <button id = "btn">Click Me</button> <p><span id = "box">Some text.</span> Some more text.</p> No es necesario poner document . Solo pones el element/variable.style.property = "value" El documento es un elemento del archivo: <html> y también puedes poner solo 1 elemento antes del estilo.
Tienes un pequeño error. lo he ajustado
const btn = document.getElementById('btn'); const box = document.getElementById('box'); btn.addEventListener('click', (event) => { box.style.color = 'red'; }); <div id="box">123</div> <button id="btn">Change</button>