Uncaught ReferenceError: (function) darkmode is not defined at HTMLButtonElement.onclick

Question

Trying to make a lyrics site with a dark mode but the dark mode button just causes errors

I've tried finding solutions online but most of them say to move the script inside of the body tag but my script is already in the body

<DOCTYPE! html>
<html>
<head>
<title>Lyrics Page</title>
</head>
<style>
#bgr {
  background-color: white;
}
#lyrics {
   color:black; 
}
#songtitle {
   color: black; 
   text-align:center;
}
</style>
<body id=bgr>
    <script>
            function darkmode() {
              document.getElementById("bgr").style.background-color = "black"; 
              document.getElementById("songtitle").style.color = "grey";
              document.getElementById("lyrics").style.color = "grey";        
            }
            </script>
    <button type="button" onclick="darkmode()">Dark Mode</button>
<h1 id=songtitle>song</h1>
<h2 id=songtitle>artist</h2>
<br>
<center id=lyrics>paragraph 1</center>
<br>
<center id=lyrics>paragraph 2</center>
<br>
<center id=lyrics>paragraph 3</center>
</body>
</html>

Possible duplicate of [How do I change the background color with JavaScript?](https://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) — Ivar, Sep 13 '19 at 16:25
Change `style.background-color` to `style.background`. You can't have a dash in a JavaScript property name. It gives a syntax error. — Ivar, Sep 13 '19 at 16:26
Also `` should be ` `. This is not related to your issue, but it is invalid HTML otherwise. — Ivar, Sep 13 '19 at 16:28
I also just noticed that you have multiple elements with the same `id`. That is not allowed, `id`s should be unique in the document. (Now your `getElementById` will only match the first.) Try to use a `class` instead. — Ivar, Sep 13 '19 at 16:35

score 1 · Accepted Answer · answered Sep 13 '19 at 16:28

Your problem is the document.getElementById("bgr").style.background-color = "black"; part. When setting css properties in JavaScript you should use camelCase. So if you change:

document.getElementById("bgr").style.background-color = "black";

to

document.getElementById("bgr").style.backgroundColor = "black";

It will work.

score 0 · Answer 2 · answered Sep 13 '19 at 16:28

You have a syntax error in your javascript code. It is not background-color, it is backgroundColor.

Your code working:

function darkmode() {
    document.getElementById("bgr").style.backgroundColor = "black"; 
    document.getElementById("songtitle").style.color = "grey";
    document.getElementById("lyrics").style.color = "grey";        
}

#bgr {
  background-color: white;
}
#lyrics {
   color:black; 
}
#songtitle {
   color: black; 
   text-align:center;
}

<DOCTYPE! html>
<html>
<head>
<title>Lyrics Page</title>
</head>
<body id="bgr">
    
    <button type="button" onclick="darkmode()">Dark Mode</button>
<h1 id="songtitle">song</h1>
<h2 id="songtitle">artist</h2>
<br>
<center id="lyrics">paragraph 1</center>
<br>
<center id="lyrics">paragraph 2</center>
<br>
<center id="lyrics">paragraph 3</center>
</body>
</html>

score 0 · Answer 3 · answered Sep 13 '19 at 16:31

The issue is with the first line of your darkmode function.

    'document.getElementById("bgr").style.background-color = "black";`

you need to change background-color to backgroundColor

Javascript doesn't see the hyphen as a part of the name, but instead subtraction. Resulting in an error because you are trying to set an expression equal to "black", not a variable like you intended.

Uncaught ReferenceError: (function) darkmode is not defined at HTMLButtonElement.onclick

3 Answers3