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>//Trying to change the color of the tag when the user clicks it //trying to implement this function but it showing the same error style cannot be null
It's case sensitive. Not "Style", it is "style". When it says undefined, check if it exists
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>