CODEWITHSUNDEEP
javascripthtmldomtypeerroruncaught-exception
thanush pk
thanush pk

Reputation: 1

Uncaught TypeError: Cannot set properties of undefined (setting 'color')

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

Upvotes: -1

Views: 2694

Answers (1)

ullas kakanadan
ullas kakanadan

Reputation: 149

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>

Upvotes: 1

Related Questions