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

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

Answer 1

使用Jquery：

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?

Answer 2

您创建一个＆＃34;占位符＆＃34; （对话框中的另一组<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>

更新您的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);
}

查看JSFiddle进行演示：的 http://jsfiddle.net/fmEPs/

将变量从Javascript传递到HTML

2 个答案: