好吧,我有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>
答案 0 :(得分:0)
正如其他几个人所述,您的blockResults
函数没有被调用。调用后,有两个错误会阻止count
正确递增:
dropzone永远不会有children
。您已经在以下行中检查了子代的存在:var dropzone = hitblock.lastElementChild;
所以我将if语句更改为if (dropzone) {
var blockId = dropzone.firstElementChild.id;
行让我有些困惑,因为您试图获取块的ID,但是您正在查看不存在的孩子的ID。我将行更改为var blockId = hitblock.id;
在这两个更改之后,计数器开始递增。