Javascript / html5拖n滴计数

Question

好的，我有7个颜色块，在其中拖动7个颜色名称。如果用户在正确的颜色块中得到正确的颜色名称，他们就会得到一个点。这是我下面的代码，但是当用户得到正确的答案时，我的计数不起作用。有人能帮忙吗?我知道这是件我看不到的蠢事。

​

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

正如其他一些人所指出的，您的blockResults函数没有被调用。一旦调用了它，就会有两个错误阻止count正确地递增：

• 下拉区域将永远不会有children。您已经检查了该行中的子元素的存在性：var dropzone = hitblock.lastElementChild;，所以我将if语句更改为if (dropzone) {
• 当您试图获取块的id时，行var blockId = dropzone.firstElementChild.id;有点让我感到困惑，但您正在查看的是不存在的子Id。我把行改为var blockId = hitblock.id;

在这两个更改之后，计数器开始递增。