background doesn't change when i edit it with js-CodePudding

when i change the background color from a div with js its doenst change it on my site. when i inspect i see that the css gets added inline but it doenst change this is the code i use in my js file to change the backgroundcolor i also make the div in this file i also have to ue js and setattribute because its for school task here is the whole js file

const div=document.createElement("div")
const h3=document.createElement("h3")
document.querySelector("main").appendChild(div)
div.appendChild(h3)
h3.innerHTML="Status"
div.id="status"

here i initiate the div

document.getElementById("status").addEventListener("mouseover", () => document.getElementById("status").setAttribute("style", "background-color:black;"));
document.getElementById("status").addEventListener("mouseout", () => document.getElementById("status").removeAttribute("style"));

here i try to change the background color

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Games</title>
    <link type="text/css" href="styles/style.css" rel="stylesheet" />
    <script tpye="text/javascript" src="js/dom.js" defer></script>
    <script type="text/javascript" src="js/table-overview.js" defer></script>
  </head>
  <body>
    <header>
      <img src="images/logo.jpg" alt="Logo image of games"  />
      <nav>
        <ul>
          <li >
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="overview.html">Overview</a>
          </li>
          <li><a href="table-overview.html">Table overview</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>My Games</h2>
    </main>
    <footer>Wietse Gijbels: Front-end - 2022</footer>
  </body>
</html>

*{
    background-color: #00004f;
    color: #fff;
    text-align: center;
    max-width: 800px;
    margin: auto;
}

h2{
    margin: 2em 0 ;
}

h3{
    margin: 3em 0 1.5em 0
}

p{
    margin: auto;
    margin-bottom: 10px;
}

footer{
    margin-top: 2em;
    background-color: #000083;
    padding: 10px 0;
    border-radius: 10px;
}

CodePudding user response：

Based on your code, we did not see where is div come from.

If we defined an element and assign it to div,it will work,below is a simple reference for you

let div = document.getElementById("status")
div.addEventListener("mouseover", () => div.setAttribute("style", "background-color:black;color:white"));
div.addEventListener("mouseout", () => div.removeAttribute("style"));

<div id="status">Change Background Color</div>

Update: Based on OP's new code

const div=document.createElement("div")
const h3=document.createElement("h3")
document.querySelector("main").appendChild(div)
div.appendChild(h3)
h3.innerHTML="Status"
div.id="status"

let divEle = document.getElementById("status")
divEle.addEventListener("mouseover", () => divEle.setAttribute("style", "background-color:black;color:white"));
divEle.addEventListener("mouseout", () => divEle.removeAttribute("style"));

<main>
</main>

CodePudding user response：

I don't really know whats going on here with your current code however I wrote the following to get the desired result.

const div = document.createElement("div")

var body = document.getElementById("main")
body.appendChild(div)
div.setAttribute("id", "status");

let divSelect = document.getElementById("main")
divSelect.addEventListener("mouseover", () => div.setAttribute("style", "background-color:black;color:white"));
divSelect.addEventListener("mouseout", () => div.removeAttribute("style"));

#status {
  width: 200px;
  height: 25px;
  border: 1px solid black;
}

<div id="main"></div>