将变量从Javascript传递到HTML

时间:2014-06-12 19:45:51

标签: javascript html

由于某种原因显示为NaN,我无法弄清楚为什么因为posX在显示为警报时有一个值,而不是当我将其显示为div时:(???

我将代码更改为包含所有Javascript

HTML:

<canvas id="myCanvas" height ='640' width='840' onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';" width="300" height="150" style="border:1px solid #d3d3d3;" ></canvas>



<div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "this.style.display='none';document.getElementById('fade').style.display='none'">Close</a><p>Measurement</p><p>Height</p><p>Width</p><p>Diameter</p></div>

<div id="fade" class="black_overlay" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>

相关的Javascript:

var mouseX;
var mouseY;

canvasBg.addEventListener('mousemove', mouseMoved, false);
canvasBg.addEventListener('click', mouseClicked, false);

function mouseMoved(e){
mouseX = e.pageX-canvasBg.offsetLeft;
mouseY = e.pageY-canvasBg.offsetTop;

}

var posX = Math.ceil((mouseX-25)/65);
var posY = Math.ceil((mouseY-25)/65);

function mouseClicked(e){
alert('X: ' + Math.ceil((mouseX-25)/65) + ' Y: ' + Math.ceil((mouseY-25)/65));
}

1 个答案:

答案 0 :(得分:1)

NaN是表示非数字的特殊值。它指示应返回有效数字的函数的错误条件。 如果参数中指定的值无法转换为或解析为数字,则多个JavaScript方法将返回NaN。

var posX = parseInt(Math.ceil((mouseX-25)/65));

首先你可以测试isNaN(testValue);结果是真还是假;