Javascript / html5拖曳n落数

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.