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

Aside: document.getElementById('light').style.display='none'; can be shorted to: this.style.display='none'; since you are in the current element. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jun 12, 2014 at 19:48
@Diodeus - How would the parent DIV be this when clicking an anchor ? — adeneo
– adeneo, Commented Jun 12, 2014 at 19:49
"Relevant javascript" <- not really when we have no idea where and when it's called ? — adeneo
– adeneo, Commented Jun 12, 2014 at 19:50

Naresh · Accepted Answer · 2014-06-12 19:53:51Z

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;

answered Jun 12, 2014 at 19:53

Naresh

2,79110 gold badges48 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing variable from Javascript to HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related