Question

我在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'语句调用，所以我不明白为什么它决定在这次调用时打破...有没有人有任何想法吗？

Answer 1

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

来解决该问题

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

即。删除该行末尾的)。

使用JS'if'语句检测图像是否被拖动到HTML5画布上的正确位置

1 个答案: