document.querySelectorAll('button').forEach (function(button){ button.onclick=function(){ document.querySelector('#hello').Style.color=button.dataset.color; } }); <!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> <body> <h1 id="hello">Hello wprld</h1> <button data-color="red">Red</button> <button data-color="green">green</button> <button data-color="blue">Blue</button> </body> </html>// Intentando cambiar el color de la etiqueta cuando el usuario hace clic en ella // Intentando implementar esta función pero mostrando el mismo estilo de error no puede ser nulo
Es sensible a mayúsculas y minúsculas. No es "estilo", es "estilo". Cuando dice indefinido, comprueba si existe.
document.querySelectorAll('button').forEach (function(button){ button.onclick=function(){ document.querySelector('#hello').style.color=button.dataset.color; } }); <!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> <body> <h1 id="hello">Hello wprld</h1> <button data-color="red">Red</button> <button data-color="green">green</button> <button data-color="blue">Blue</button> </body> </html>