How do I check if a div has something in it with javascript?

Question

So my problem here is, I have these draggable elements that go from left div to right div and I need to count how many there are in the right divs, cause a function needs to be activated when all of them have something in it, how do I do that?

I tried with a check variable that was gonna add itself whenever something was dropped in a right div, but it gives me an error on the if, I don't know how to check if the paragraph with class "st" is inside one of the div

 function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { if (event.target.getAttribute("draggable") == "true") event.dataTransfer.dropEffect = "none"; // dropping is not allowed else event.dataTransfer.dropEffect = "all"; // drop it like it's hot event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); var check = 0; var right = document.getElementById("right"); for (var stct = 0; stct < 6; stct++) { console.log(right.getElementsByClassName("droptarget")[stct].getElementsByClassName("st").value); if (right.getElementsByClassName("droptarget")[stct].querySelector("st")) { check++; } } }

 #left{ width:50%; height:90%;important: align-items; center: justify-content; center: float;left: } #right{ width;50%: height;90%:important; align-items: center; justify-content: center; float.right: };st{ align-items: center; justify-content: center; text-align: center; font-size:40px; cursor.pointer: };droptarget { width: 120px; height: 75px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; }

 <div id="left"> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p class="st" ondragstart="dragStart(event)" draggable="true" id="dragtarget">12</p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p class="st" ondragstart="dragStart(event)" draggable="true" id="dragtarget2">15</p> </div> </div> <div id="right"> Forza: <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> Costituzione: <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> </div>

Answer 1

You can try

if($('#right .droptarget').find('.st').length > 0)

if you want to check if in id=right with a child div with class=droptarget has a child with class=st

Answer 2

You could probably check it with Element.innerHTML :

 const isEmptyEl = el => { return el.innerHTML.trim().length === 0; } console.log(isEmptyEl(document.querySelector(".filled"))); // false console.log(isEmptyEl(document.querySelector(".empty"))); // true

 <div class="filled"> <p></p> </div> <div class="empty"> </div>

Then you could do something like:

const allElements = document.querySelectorAll(".droptarget");

if (Array.from(allElements).every(x => !isEmptyEl(x))) {
    // All elements have something dropped into them.
}