JavaScript-更新HTML的内容<；p>；当光标悬停在HTML5画布上的图像上时进行标记

我有一个HTML5画布，上面显示了许多图像。我已经使用KineticJS库的本地副本将图像绘制到画布上（我正在使用本地副本，因为我想稍微更改它提供的功能）

现在我想编写一个函数，当检测到光标悬停在画布上显示的特定图像上时，该函数将更新HTML

标记中显示的文本

我编写的函数如下所示：

function cursorOverAssetsBox(mouseX, mouseY){
if((mouseX >= assetsDescriptionBox.img_x && mouseX <= assetsDescriptionBox.img_x + assetsDescriptionBox.img_width) &&
    (mouseY >= assetsDescriptionBox.img_y && mouseY <= assetsDescriptionBox.img_height))
    document.getElementById('tipsParagraph').innerHTML = tips[34];
}

“tipsParagraph”是我试图替换其innerHTML的段落的ID，

tips[34]

是一个JS数组中的元素，该数组包含我要在段落中显示的文本

“assetBox”是我给包含在HTML隐藏部分的图像的ID。图像按预期显示在画布上，但是，每当我将光标悬停在该图像上时，就会收到一个控制台错误，告诉我“AssetDescriptionBox未定义”

我不明白为什么这是。。。我不是用行

var AssetDescriptionBox=…

声明了它吗？它抱怨的一行是my

cursorOverAssetsBox

函数中的“if”语句

有人知道我做错了什么吗

编辑

似乎还需要将调用添加到

cursorOverAssetsBox（mouseX，mouseY）\u mousemove

函数中的code>已停止在画布上拖放图像，您知道这是为什么吗

AssetDescriptionBox

变量已在以下函数中定义：

function drawDescriptionBoxes(){
console.log("function drawDescriptionBoxes() is drawing the description boxes");
var assetsDescriptionBox = document.getElementById("assetBox");
var liabilitiesDescriptionBox = document.getElementById("liabilitiesBox");
    var incomeDescriptionBox = document.getElementById("incomeBox");
var expenditureDescriptionBox = document.getElementById("expenditureBox");  

drawBox(assetsDescriptionBox, 70, 400, 120, 70);
drawBox(liabilitiesDescriptionBox, 300, 400, 120, 70);
drawBox(incomeDescriptionBox, 530, 400, 120, 70);
drawBox(expenditureDescriptionBox, 760, 400, 120, 70);

}

此函数位于一个单独的JS文件中，名为“drawdescriptionboxes.JS”，并已添加到HTML文件的开头，行为

---

有人有什么想法吗？

您的

assetsDescriptionBox

声明的顺序和位置很重要。我们可以看到更多的代码吗？当然，现在将添加它。已经添加了显示

AssetDescriptionBox

声明的代码。您的代码看起来很好——只要确保在声明

AssetDescriptionBox

时页面上有一个ID为

assetBox

的元素，在加载DOM之前不要调用此函数。使用

new image（）

加载图像可能比使用DOM更容易。。。

function drawDescriptionBoxes(){
console.log("function drawDescriptionBoxes() is drawing the description boxes");
var assetsDescriptionBox = document.getElementById("assetBox");
var liabilitiesDescriptionBox = document.getElementById("liabilitiesBox");
    var incomeDescriptionBox = document.getElementById("incomeBox");
var expenditureDescriptionBox = document.getElementById("expenditureBox");  

drawBox(assetsDescriptionBox, 70, 400, 120, 70);
drawBox(liabilitiesDescriptionBox, 300, 400, 120, 70);
drawBox(incomeDescriptionBox, 530, 400, 120, 70);
drawBox(expenditureDescriptionBox, 760, 400, 120, 70);

}