Javascript에서 HTML로 변수 전달

Question

내 코드는 클릭 이벤트를 등록하여 대화 상자를 열고 일부 정보를 제공합니다. 대화 상자에 사용자가 클릭하는 페이지의 위치를 ​​표시하기를 원합니다. 현재이 정보는 경고 상자에 표시되지만 대화 상자에 표시되기를 원합니다.

누구든지이 문제를 해결할 수 있습니까?

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

자바 스크립트와 jQuery

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" 
} 

Answer 1

당신이 "자리"를 만듭니다 (또 다른 세트의 <p> 태그)를 대화 상자에 넣은 다음 채 웁니다 그것을 클릭하십시오.

업데이트하여 HTML :

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

업데이트합니다 자바 스크립트 :

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

체크 아웃 데모의 JSFiddle : 당신이 무슨 말을 하려는지 명확하지 http://jsfiddle.net/fmEPs/

Answer 2

:

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

당신과 함께 노드를 만들 수 있습니다

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

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

또는 단지와 HTML 삽입 : 또한

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

참조 : How to append data to div using javascript?