Firefox addon popup JavaScript not working

My code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Youpotify</title>
</head>

<body>
    <div class="download">
        <div class="video">
            <button id="video">Download this video</button>
        </div>
        <div class="playlist">
            <button id="playlist">Download this playlist</button>
        </div>
        <div class="channel">
            <button id="channel">Download this channel</button>
        </div>
    </div>
    <script>
        document.getElementById("video").addEventListener("click", () => {
            document.getElementById("video").style.backgroundcolor = "red";
        });
    </script>
</body>

</html>

I loaded this addon on Temporary Extension and I click the button but the background color did not change.

I wanted to run my JavaScript file in firefox addon popup HTML file, but it didn't work.

Solution

There are a couple of potential issues here:

First, inline Javascript (inside <script></script> tags) is not permitted by default.

To include Javascript to your popup, you need to put it into a separate Javascript file and reference is with:

<script src="index.js"></script>

where your index.js is in the same folder and has your code:

document.getElementById("video").addEventListener("click", () => {
  document.getElementById("video").style.backgroundColor = "red";
});

Second,

document.getElementById("video").style.backgroundcolor = "red";

has incorrect attribute, it should be style.backgroundColor with a capital C.