Passing variables from Javascript to HTML

Question

My code registers an on click event, which opens a dialogue box and presents some information. I want the dialogue box to also display where on the page the user clicks. Currently that information is presented in an alert box, but I want it to be in the dialogue box.

Could anyone possibly help me with this problem?

HTML

<canvas id="myCanvas" height ='1000' width='1000' 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 = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a><p>Stress</p><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>

CSS

.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: fixed;
top: 10%;
left: 25%;
width: 50%;
height: 216px;
padding: 15px;
border: 15px solid #808080;
background-color: white;
z-index:1002;
overflow: auto;
}

Javascript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var gCanvasElement = ctx;

ctx.strokeStyle="#FF0000";

ctx.strokeRect(20,20,800,600);

// Positions are hardcoded to make sure that circle starts from the right place
var startX = 55;
var startY = 55;

console.clear();

for(var i=1;i<=8;i++){
    console.group(i);
    for(var j=1;j<=i;j++){

        ctx.beginPath();
        ctx.strokeStyle='green';
        //radius is hardcoded to 30 for testing purpose
        ctx.arc(startX*j + (j-1)*10,startY*i + (i-1)*10,30,0,2*Math.PI);
        ctx.stroke();

        //console log
        console.group(j);    
        console.log(startX*j + (j-1)*10);
        console.log(startY*i + (i-1)*10);
        console.groupEnd(j);
    }

    console.groupEnd(i);
}

var canvasBg = document.getElementById('myCanvas');
var ctxBg = canvasBg.getContext('2d');

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(((j-1)*65-mouseY+25)/65));
}

window.onload=func
function func()
{
    document.getElementById("d").innerHTML="String"
}

It's not clear what you're trying to do. You want to insert the value of a variable into an element like a div? For that you could use `append`. — Nick, Jun 15 '14 at 05:50
Yes I want to insert the variable into the div with ID light. - I'll look up append thanks — PiMan, Jun 15 '14 at 05:51
@user3733042 Try `document.getElementById("d").innerHTML += "Some text";` to append "Some text" to the element with the id='d' (e.g. use "light" instead of d). — Elliott Frisch, Jun 15 '14 at 05:55

score 0 · Answer 1 · edited May 23 '17 at 10:33

With Jquery:

var data ="SomeData";
$NewDiv = $('<div>'+SomeData+'</div>');
$('#ExistingDiv').append($NewDiv);

You can create nodes with:

var p = document.createElement("p");
document.body.appendChild(p);

See: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

Or simply insert HTML with:

document.getElementById('ExistingElement').innerHTML = "<div>"+MyData+"</div>";

See also: How to append data to div using javascript?

score 0 · Accepted Answer · answered Jun 15 '14 at 05:58

You create a "placeholder" (another set of <p> tags) in your dialogue box - and then you populate it on click.

Update your HTML:

    <p>Stress</p>
    <p>Measurement</p>
    <p>Height</p>
    <p>Width</p>
    <p>Diameter</p>
    <p id="xLoc"></p>
    <p id="yLoc"></p>

Update your javascript:

function mouseClicked(e){
    document.getElementById("xLoc").innerHTML= 'X:' + Math.ceil((mouseX-25)/65);
    document.getElementById("yLoc").innerHTML= 'Y:' + Math.ceil(((j-1)*65-mouseY+25)/65);
}

Check out the JSFiddle for a Demo: http://jsfiddle.net/fmEPs/

Passing variables from Javascript to HTML

2 Answers2