JS控制檯錯誤 - 對象未定義

Question

我有以下JS函數，我正在使用它來檢測HTML5畫布上的「可拖動」圖像是否被拖動到靜態「描述框」圖像的頂部，也顯示在畫布：

function isHit(mouseX, mouseY){ 
if(draggingImage == true){ 
    console.log("if dragging image == true statment is being called"); 
    if(mouseY > 420){ 
     if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){ 
      console.log("Correct"); 
     }else{ 
      console.log("Incorrect"); 
     } 
    } 
} 

}

的想法是，將有在畫布上的一些靜態圖像（其將是該描述框），和可拖動的圖像的更大數量。用戶將被要求拖動每個可拖動的圖像到相關的描述框。

此刻，我的if聲明只是檢查當前被拖動的圖像是否屬於四個描述框中的第一個。由於描述框全部顯示在畫布底部的一行中，所以我設置了函數來僅在mouseY變量（畫布上光標的y位置）大於0時檢查碰撞420-因爲420是描述框圖像的頂部'邊界'。

然後，如果draggingImage變量爲true，並且光標的mouseY值大於420，我想開始檢查光標是否懸停在任何描述框上。第一個顯示在X位置80和200之間，所以我檢查mouseX是否大於80且小於200.

如果是，則函數應檢查obj.shape.index的值是否大於或者等於0並且小於numImagesAssets的值。如果是，控制檯應該記錄「正確」，如果沒有，它應該記錄「不正確」。

變量obj.shape.index獲取在我的圖像數組中所點擊圖像的位置（此數組包含畫布上顯示的所有可拖動圖像）。如果該值在一定範圍內，那麼我知道圖像屬於第一個描述框，如果它在另一個範圍之間，則它屬於下一個描述框等。

在此示例中，值可變numImagesAssets爲10（如在我的代碼顯示在控制檯由一個console.log線）

以我mousedown功能，我有行：

console.log("value of variable obj:" + output + ". Shape is " + obj.shape + ". index is " + obj.shape.index); 

和當我點擊我的畫布的圖像上，這個console.log行顯示變量屬性obj.shape.index的值，例如，我剛剛點擊畫布上拖動圖像之一，該行打印以下輸出到控制檯：

value of variable obj:shape: [object Object]; pixel: [object Uint8ClampedArray]; . Shape is [object Object]. index is 8 

所以我知道我點擊那個時候的形象在我的圖像陣列在第8位（我已經多次手動檢查過，每次都點擊一張不同的圖片，並且始終顯示正確的位置）。

現在，我遇到的問題是，當我真的去拖動一個圖像在其正確的描述框，我得到一個控制檯錯誤，說「obj沒有定義」，它是抱怨行：

if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){ 

但是，奇怪的是，如果我拖動圖像的不屬於描述框之一，在我if statment的else子句正確觸發，並在「不正確的」被打印到控制檯....

我想不通爲什麼它不工作時，我將圖像拖到正確的說明框中，鄰r爲什麼它說「obj」在這種情況下沒有被定義，但是隨後很高興在if聲明中使用「obj」作爲「else」子句。

任何人有任何想法？

編輯19/03/2013 @ 12:00

好吧，我已經編輯我的isHit功能一點，添加另一console.log線，它會顯示我的isHit函數內的obj.shape.index值。該函數現在看起來是這樣的：

function isHit(mouseX, mouseY, obj){ 
if(draggingImage == true){ 
    console.log("if dragging image == true statment is being called"); 
    if(mouseY > 420){ 
     console.log("Value of obj.shape.index = " +obj.shape.index); 
     if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){ 
      console.log("Correct"); 
     }else{ 
      console.log("Incorrect"); 
     } 
    } 
} 
} 

我剛剛調用isHit之前以下控制檯日誌行：

console.log("obj.shape.index = " + obj.shape.index); 

此行顯示的obj.shape.index值是0的時候我第一次點擊圖像（這是正確的 - 它是我的圖像數組中的第一張圖像），然而，隨後我將圖像拖到畫布周圍，obj.shape.index的值似乎隨機增加......在某一時刻，控制檯顯示它是23，然後是25，然後當我最終將它拖到它的描述框時，控制檯記錄下這行：

if dragging image == true statment is being called 

顯示該isHit函數被調用，並打印到控制檯，接下來的事情是行：

Value of obj.shape.index = 34 

任何想法，爲什麼obj.shape.index價值不斷增加？它實際上不是數組中元素的位置嗎？我確定它是這樣的，因爲當我點擊其他圖像時，它會顯示它們在數組中的位置值，所以我不明白爲什麼隨着我在畫布上移動圖像，值不斷增大。 ..它在陣列中的位置並不是在所有的改變......

Answer 1

如果obj.shape.index是進入前isHit有效（），你可能有一個範圍的問題。

試試這個 - 供應OBJ到isHit：

// call isHit and also supply obj 
console.log("obj = "+obj);     // Test obj for validity just before calling isHit 
var isItHit = isHit(mouseX, mouseY, obj); // Then call isHit WITH obj 

// and modify isHit to accept the obj 
function isHit(mouseX,mouseY,obj) { ...