Search code examples
javascriptonmouseover

Java script Switching color of div

The following script is creating a grid of 16 divs. Per mouseover effect I would like to change the color of the divs permanently. Can somebody give me a pointer how what function changeColor could look like?

<script>

let gridcontainer = document.querySelector('#gridcontainer');
gridcontainer.setAttribute('style', 'width: 20px; display: grid; grid-template-columns: auto auto auto auto;')

var index = [];
var boxes;
var i;
var change;

function createGrid(){                     
  for(i=0;i<16;i++){


                                          //console.log(index);

    boxes = document.createElement('div');
                                          console.log(boxes);
    boxes.classList.add('boxes');
    boxes.setAttribute('style','width: 30px; height:30px; background-color: 
    blue; margin: 5px;');
    boxes.setAttribute('onmouseover', changeColor());
    gridcontainer.appendChild(boxes);  

  }}

  function changeColor(){
  change = document.querySelector('.boxes');
  change.setAttribute('style','background-color: red');

  }
</script>

Thank you all for your help.

Solution

  • I have used jquery function (toggleClass) to change the color div on hover

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
    .b1{
        background:red;
        width: 30px;
        height: 40px;
        margin: 10px;
    }
    .b{
        background:blue;
        width: 30px;
        height: 40px;
        margin: 10px;
    }
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
<script type="text/javascript">
    $('div').hover(function () {
        // body...
         $("div").toggleClass("b");
    });
</script>
</body>
</html>