Javascript/html5拖放计数

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 函数没有被调用。一旦被调用，就会有 2 个错误阻止 count 正确递增：

• dropzone 永远不会有children。您已经在这一行中检查了孩子的存在：var dropzone = hitblock.lastElementChild; 所以我将 if 语句更改为 if (dropzone) {

• var blockId = dropzone.firstElementChild.id; 行让我有点困惑，因为您试图获取块的 ID，但您正在查看不存在的孩子的 ID。我把线路改成var blockId = hitblock.id;

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