0

我在 HTML5 画布上有许多“可拖动”图像。画布上还显示了许多“描述框”图像，用户需要将每个可拖动的图像拖到其对应的描述框中。

画布上当前显示了四个描述框，我有一个函数用于检测图像是否已被拖动到其中一个框。每次将图像拖到一个框时，我都会检查它是否被拖到了正确的框 - 如果有，则图像被隐藏，但如果没有，它仍然可见。

所有可拖动图像都存储在一个数组中，我检查它们是否被拖动到正确框的方法是使用它们在数组中的位置，即如果它们在数组中的位置 0-9 之间，它们属于方框1；如果它们在位置 10-19，它们属于框 2，依此类推。

我一次为每个盒子添加一个“if”语句，它目前正在按前两个盒子的预期工作。我现在正在尝试为第三个框添加代码，但由于某种原因，当我添加它时，代码中断并且我在控制台中得到一个 ReferenceError。

这是函数当前的样子：

function isHit(mouseX, mouseY, obj){
  console.log("isHit has been called from within if statement in mousemove function");
  console.log("draggingImage variable value = " +draggingImage);
  if(draggingImage == true){
    console.log("if dragging image == true statment is being called");
    console.log("Value of selectedImage = " + selectedImage);
    console.log("Value of selectedImageArrayLocation = " + selectedImageArrayLocation);
    if(mouseY > 250){
        //console.log("Value of obj.shape.index = " +obj.shape.index);
        if((mouseX > 80) && (mouseX < 200) && (selectedImageArrayLocation >= 0) && (selectedImageArrayLocation <= numImagesAssets)){
            console.log("Correct");
            document.getElementById('tipsParagraph').innerHTML = "Correct! This is an asset because it is an item that can be bought or sold for cash.";
            selectedImage.hide();
            console.log("selectedImage has been removed: " + selectedImage);
        }else if((mouseX > 80) && (mouseX < 200) && (selectedImageArrayLocation > numImagesAssets)){
            console.log("Incorrect");
            console.log("Selected image array location: " + selectedImageArrayLocation);
            document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is not an asset. It is not a physical item that would be bought or sold for cash. ";

        }else if((mouseX > 310) && (mouseX < 430) && (selectedImageArrayLocation > numImagesAssets) && (selectedImageArrayLocation <= numImagesAssets + numImagesLiabilities)){
            document.getElementById('tipsParagraph').innerHTML = "Correct! This is a liability because it is an item or service that the company is required to make regular payments for. ";
            selectedImage.hide();
            console.log("selectedImage has been removed: " + selectedImage);
        }else if((mouseX > 310) && (mouseX < 430) && ((selectedImageArrayLocation <= numImagesAssets) || (selectedImageArrayLocation > numImagesAssets + numImagesLiabilities))){
            console.log("Incorrect. This icon is not a liability.");
            console.log("Selected image array location: " + selectedImageArrayLocation);
            document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is not a liability. It is not an item or service that the company is required to make regular payments for. ";

        }else if((mouseX > 540) && (mouseX < 660) && ((selectedImageArrayLocation > numImagesAssets + numImagesLiabilities) && (selectedImageArrayLocation <= numImagesAssets + numImagesLiabilities + numImagesIncome))){
            document.getElementById('tipsParagraph').innerHTML = "Correct! This is a source of income because it is a product or service which the company sells to its customers for cash. ";
            selectedImage.hide();
            console.log("Selected image has been removed: " + selectedImage);
        }/*else if((mouseX > 540) && (mouseX < 660) && ((selectedImageArrayLocation <= numImagesAssets + numImagesLiabilities) && (selectedImageArrayLocation > numImagesAssets + numImagesLiabilities + numImagesIncome))){
            console.log("Incorrect. This icon is not a source of income.");
            console.log("Selected image array location: " + selectedImageArrayLocation);
            document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is not a source of income.");
        } */
    }
  }
}

'if' 语句是成对的，所以前两个属于第一个描述框，后两个属于第二个，等等。

目前，我只有第一个“if”语句适用于第三个描述框......我已经为它编写了第二个“if”语句，其方式与前两个描述框完全相同，但对于某些原因，当我取消注释“else if”子句时，在浏览器中查看我的页面，并将图像拖到不属于它的描述框中，我收到一个控制台错误，上面写着：

ReferenceError: isHit is not defined

该错误正在抱怨该行：

var isItHit = isHit(mouseX, mouseY, obj);

这是在我的mousemove函数中，它也被所有其他“if”语句调用，所以我不明白为什么这次调用它时决定中断......有人有什么想法吗？

4

1 回答 1

0

啊，好的，我发现了问题所在...在document.getElementById最后一个 else if 子句的行中，我有)太多了。通过将该行更改为：

document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is not a source of income.";

即删除)行尾的。

于 2013-03-21T14:35:38.120 回答