How do I change the background color of an element on drop with JavaScript-CodePudding

I am making somekind of a sprintboard and I would like to change the background color of my box depending on which container is it in (toDo, inProgress, Done). I cannot think of a solution, I have tried some but failed, and the other resources I have found were not so helpful. This is my code, the whole code (just for the purpose of easier understanding): Edit: I don't think I have been clear enough, I need to find a solution for this problem with javascript.

let emptyCell = "cell4";

function boxOver(event) {
  event.preventDefault();
}

function boxDrag(event, boxNumber) {
  event.dataTransfer.setData("text", boxNumber.toString());
}

function boxDrop(event, cellNumber) {
  event.preventDefault();
  let boxNumber = event.dataTransfer.getData("text");

  let draggedBox = document.getElementById("box"   boxNumber);
  let targetCell = document.getElementById("cell"   cellNumber);

  if (targetCell.innerHTML.trim() === "") {
    emptyCell = draggedBox.parentNode.id;
    targetCell.appendChild(draggedBox);
  }
}

.container {
  width: 1000px;
  margin: 0 auto;
  display: flex;
}

#div1 {
  background-color: gray;
  float: left;
  height: 750px;
  width: 300px;
  text-align: center;
  position: relative;
}

#div2 {
  background-color: gray;
  float: left;
  margin-left: 20px;
  height: 750px;
  width: 300px;
  text-align: center;
}

#div3 {
  background-color: gray;
  float: right;
  margin-left: 20px;
  height: 750px;
  width: 300px;
  text-align: center;
}

.text1 {
  background-color: black;
  color: white;
  text-align: center;
  font-size: 40px;
  width: 250px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}

.text2 {
  background-color: orange;
  color: white;
  text-align: center;
  font-size: 40px;
  width: 250px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}

.text3 {
  background-color: green;
  color: white;
  text-align: center;
  font-size: 40px;
  width: 250px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}

#box1 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#box2 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#box3 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#box4 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#box5 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#cell1 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell2 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell3 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell4 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell5 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell6 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell7 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell8 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell9 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell10 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell11 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell12 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell13 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell14 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell15 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

<div >
  <div id="div1">
    <div >To Do</div><br>
    <div id="cell1" ondragover="boxOver(event)" ondrop="boxDrop(event, 1)">
      <div id="box1" draggable="true" ondragstart="boxDrag(event, 1)">#1</div>
    </div>
    <div id="cell2" ondragover="boxOver(event)" ondrop="boxDrop(event, 2)">
      <div id="box2" draggable="true" ondragstart="boxDrag(event, 2)">#2</div>
    </div>
    <div id="cell3" ondragover="boxOver(event)" ondrop="boxDrop(event, 3)">
      <div id="box3" draggable="true" ondragstart="boxDrag(event, 3)">#3</div>
    </div>
    <div id="cell4" ondragover="boxOver(event)" ondrop="boxDrop(event, 4)"></div>
    <div id="cell5" ondragover="boxOver(event)" ondrop="boxDrop(event, 5)"></div>
  </div>
  <div id="div2">
    <div >In Progress</div><br>
    <div id="cell6" ondragover="boxOver(event)" ondrop="boxDrop(event, 6)">
      <div id="box4" draggable="true" ondragstart="boxDrag(event, 4)">#4</div>
    </div>
    <div id="cell7" ondragover="boxOver(event)" ondrop="boxDrop(event, 7)">
      <div id="box5" draggable="true" ondragstart="boxDrag(event, 5)">#5</div>
    </div>
    <div id="cell8" ondragover="boxOver(event)" ondrop="boxDrop(event, 8)"></div>
    <div id="cell9" ondragover="boxOver(event)" ondrop="boxDrop(event, 9)"></div>
    <div id="cell10" ondragover="boxOver(event)" ondrop="boxDrop(event, 10)"></div>
  </div>
  <div id="div3">
    <div >Done</div><br>
    <div id="cell11" ondragover="boxOver(event)" ondrop="boxDrop(event, 11)"></div>
    <div id="cell12" ondragover="boxOver(event)" ondrop="boxDrop(event, 12)"></div>
    <div id="cell13" ondragover="boxOver(event)" ondrop="boxDrop(event, 13)"></div>
    <div id="cell14" ondragover="boxOver(event)" ondrop="boxDrop(event, 14)"></div>
    <div id="cell15" ondragover="boxOver(event)" ondrop="boxDrop(event, 15)"></div>
  </div>
</div>

CodePudding user response：

You can do this by selecting the child's inside a specific div container. So in this case, to select all the boxes inside the first container, we will do this #div1 div > *. This selector selects the boxes inside a cell, which is apparently a div, and which is inside the first container.

Some more code as for reference:

#div1 {
        background-color: gray;
        float: left;
        height: 750px;
        width: 300px;
        text-align: center;
        position: relative;
      }

      #div1 div > * {
        background-color: #000;
      }

      #div2 {
        background-color: gray;
        float: left;
        margin-left: 20px;
        height: 750px;
        width: 300px;
        text-align: center;
      }

      #div2 div > * {
        background-color: red;
      }

      #div3 {
        background-color: gray;
        float: right;
        margin-left: 20px;
        height: 750px;
        width: 300px;
        text-align: center;
      }

      #div3 div > * {
        background-color: #000;
      }

Hope it helps ❤️

CodePudding user response：

You can do this with some CSS

#div1 .box {
  background: black;
}

#div2 .box {
  background: orange;
}

#div3 .box {
  background: green;
}

This will set the background colour of every instance of class "box" inside of #div1, #div2 and #div3 to the colour of choice

Just make sure to give each box the in your HTML