Javascript / html5 drag n drop counting

Question

Ok I have 7 colour block in which to drag 7 colour names. If the user get the correct colour name in the right colour block they receive a point. This is my code below but my count is not working when the user gets the correct answer. Can anyone help please, I know it is something stupid I'm not seeing.

function readDropZone() {
    var score = document.getElementById('score');
    score.innerHTML = 0;

    var block = document.getElementById('colour-block').children;
       
    for(var i = 0; i < block.length; ++i) {
        var hitblock = block[i];
        var dropzone = hitblock.lastElementChild;
        if (dropzone.children.length > 0) {
    
            var dropzoneId = dropzone.id;
            var blockId = dropzone.firstElementChild.id;          
            
            var blockNo = dropzoneId.substring(dropzoneId.indexOf('-') + 1);
            var dragNo = blockId.substring(blockId.indexOf('-') + 1);     

            if (dragNo == blockNo) {
                score.innerHTML = parseInt(score.innerHTML) + 1;
            } 
        }
        if (parseInt(score.innerHTML) == 10) {
            alert('Congratulations! You won the game!\nClick OK to restart.');
            location.reload();
        }
    }
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  readDropZone();
  const data = ev.dataTransfer.getData("text");
	ev.target.appendChild(document.getElementById(data));
}

 #block-1, #block-2, #block-3, #block-4, #block-5, #block-6, #block-7 {
	color: #fff;
	width: 150px;
	height: 35px;
	border: 1px solid #aaaaaa;
	text-align: center;
	padding: 10px 0;
	font-size: 1.25em;
}

#block-3 {
	color: #000;
}

#colour-block {
	float: left;
	width: 50%;
}

#colour-name {
	float: right;
	line-height: 1.5em;
	font-size: 1.25em;
	font-weight: bold;
	width: 50%;
	clear: right;
	cursor: move;
}

<h2>1. Drag and drop the names into the coloured blocks</h2>
	<div id="colour-block">
		<div id="block-1" class="block" style="background-color:red" ondrop="drop(event)" ondragover="allowDrop(event)" name="red"></div>
		<div id="block-2" class="block" style="background-color:orangered" ondrop="drop(event)" ondragover="allowDrop(event)"  name="orange" ></div>				
		<div id="block-3" class="block" style="background-color:yellow" ondrop="drop(event)" ondragover="allowDrop(event)"  name="yellow"></div>				
		<div id="block-4" class="block" style="background-color:green" ondrop="drop(event)" ondragover="allowDrop(event)"  name="green"></div>				
		<div id="block-5" class="block" style="background-color:skyblue" ondrop="drop(event)" ondragover="allowDrop(event)"  name="blue"></div>				
		<div id="block-6" class="block" style="background-color:midnightblue" ondrop="drop(event)" ondragover="allowDrop(event)"  name="indego"></div>			
		<div id="block-7" class="block" style="background-color:rgb(109, 92, 221)" ondrop="drop(event)" ondragover="allowDrop(event)"  name="violet"></div>				
	</div>
	<div id="colour-name">			
		<div id="drag-6" class="colour" draggable="true" ondragstart="drag(event)" name="indego">Indeagó</div>
		<div id="drag-2" class="colour" draggable="true" ondragstart="drag(event)" name="orange">Oráiste</div>
		<div id="drag-4" class="colour" draggable="true" ondragstart="drag(event)" name="green">Glas</div>					
		<div id="drag-3" class="colour" draggable="true" ondragstart="drag(event)" name="yellow">Buí</div>
		<div id="drag-1" class="colour" draggable="true" ondragstart="drag(event)" name="red">Dearg</div>				
		<div id="drag-7" class="colour" draggable="true" ondragstart="drag(event)" name="violet">Corcairghorm</div>			
		<div id="drag-5" class="colour" draggable="true" ondragstart="drag(event)" name="blue">Gorm</div>
	</div>
<div style="clear:both"></div>
<h1>Your score is <span id="score">0</span> out of 7</h1>			
</div>

Answer 1

As several others have stated, your blockResults function is not being invoked. Once it is being invoked there are 2 errors that are preventing count from incrementing properly:

• dropzone will never have children. You already check for the presense of children in this line: var dropzone = hitblock.lastElementChild; So I changed the if statement to just if (dropzone) {

• The line var blockId = dropzone.firstElementChild.id; was a bit confusing to me as you are trying to get the id of the block but you are looking at the child's Id which is not present. I changed the line to var blockId = hitblock.id;

The counter begun incrementing after these two changes.