how to put if statement to other if statement?

Question

I want to put if statement inside of other if statement so if #a excist, then check "#b" is excist or not if it has #b, #a background color will black else #c background color will grey

if! #a is not excist then check #b is excist or not if it has #b then #b background color will red else #c background color will blue.

how can i make this script work well in every situation??

is there anything wrong? any help will be so appreciated! thanks! :)

setInterval(function() {
  var testone = document.getElementById("a");
  var testtwo = document.getElementById("b");
  var testthree = document.getElementById("c");
  
  if ($("#a")[0]) {
    if (document.getElementById("b")) {
      testone.style.background = "black";
    } else {
      testthree.style.background = "grey";
    }
  } else {
    if (document.getElementById("b")) {
      testtwo.style.background = "red";
    } else {
      testthree.style.background = "blue";
    }
  }
}, 1000);

#a {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

#b {
  width: 100px;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid grey;
  margin-top: 50px;
}

#c {
  width: 50px;
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid grey;
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="a">
  <div id="b">
    <div id="c">
    </div>
  </div>
</div>

Answer 1

EDIT, updated since OP changed:
Setting the background of #b blue will never come true, because you can't set the background of #b if #b doesn't exist.

If you can't find an element with getElementById it will return undefined and undefined in an if statement is equivalent to false.

You had some JQuery code in it, so I removed it.

I also removed duplicate CSS code.

function updateBackground() {
  let testone = document.getElementById("a");
  let testtwo = document.getElementById("b");
  let testthree = document.getElementById("c");

  if (testone && testtwo) {
    testone.style.background = "black";
  } else if (testone) {
    testone.style.background = "grey";  
  } else if (testtwo) {
    testtwo.style.background = "red";
  } else if (testthree) {
    testthree.style.background = "blue";
  }
}

updateBackground();
setInterval(updateBackground, 1000);

#a {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

#b, #c {
  width: 100px;
  height: 100px;
  margin: 50px auto 0px;
  border: 1px solid grey;
}

#c {
  width: 50px;
  height: 50px;
}

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

Answer 2

The obvious way to do stated thing work is using logical operator.

And I guess you need to check if element is inside the other element , then you can use contains() method , likewise you may code

setInterval(function () {
  var one = document.getElementById("a");
  var two = document.getElementById("b");
  // Obvious way 
  if (one && two) {
    one.style.backgroundColor = "black";
  } else if (one && !two) {
    one.style.backgroundColor = "grey";
  } else if (!one && two) {
    two.style.backgroundColor = "red";
  } else if (!one && !two) {
    two.style.backgroundColor = "blue";
  }
  
 // methood to check if specfic element contains specific element

  if (one.contains(two)) {
    one.style.backgroundColor = "black";
  } else {
    one.style.backgroundColor = "gray";
  }
}, 1000);

#a {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

#b {
  width: 50px;
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid gray;
  margin-top: 50px;
}

<div id="a">
  <div id="b"></div>
</div>

Answer 3

I recommend not using jQuery. You can also just use element to return true or false depending on whether the element exists.

var testone = document.getElementById("a");
var testtwo = document.getElementById("b");

function watch_divs() {
  if (testone) {
    if (testtwo) {
      testone.style.background = "black";
    } else {
      testone.style.background = "grey";
    }
  } else {
    if (testtwo) {
      testtwo.style.background = "red";
    } else {
      testtwo.style.background = "blue";
    }
  }
}


watch_divs()
setInterval(function(){
  watch_divs()
},1000);

.a {
    width: 150px;
    height: 150px;
    border: 1px solid black;
}
    
.b {
    width: 50px;
    height: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid grey;
    margin-top: 50px;
}

<div id="a" class="a">
  <div id="b" class="b">
  </div>
</div>