Passing variable from Javascript to HTML

Question

The displays as NaN for some reason and I can't figure out why because posX has a value when I display it as an alert, just not when I display it as a div :(???

I changed the code to enclose all of the 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>

Relevant 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));
}

Answer 1

NaN is a special value representing Not-a-Number. It indicate an error condition for a function that should return a valid number. Several JavaScript methods return NaN if the value specified in the parameter cannot be converted to or parsed as a number.

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

First you could test isNaN(testValue); result will True or False;