Question

我想在每次点击屏幕时将球追加到不同位置，但我无法弄清楚如何编写box.innerHTML。

脚本：

var ball = document.getElementById("ball");
var box = document.getElementById("box");

box.addEventListener("click",function(e){
    var x = e.clientX -50;
    var y = e.clientY -50;
    box.innerHTML += '<div id="ball" style="left:'x'px;top:'y'px;"></div>';

})

的CSS：

*{
    margin: 0;
    padding: 0;
}

    #box {
        width: 100%;
        height: 100%;
        background-color: dimgrey;
        position: absolute;
    }

    #ball {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: white;
    }

Answer 1

box.innerHTML += '<div id="ball" style="left:' + x + 'px;top:' + y + 'px;"></div>';

要连接字符串，您需要在字符串和变量之间添加+。

Answer 2

这应该有效，

box.innerHTML += '<div id="ball" style="left:' + x + 'px;top:' + y + 'px;"></div>';

问题是你的变量x和y被识别为字符串。使用+，你可以连接它们。

有关详细信息，我建议您在此处阅读字符串文字https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals

Answer 3

我认为没有必要使用大量具有相同ID的div。最好为类

定义它们

.ball {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: white;
}    

var box = document.getElementById("box");

box.addEventListener("click",function(e){
    var x = e.clientX -50;
    var y = e.clientY -50;

    var element = document.createElement("div");
    element.style.top = y+'px';
    element.style.left = x+'px';
    element.className = "ball";
    box.appendChild(element);
});

Answer 4

你的连接是错误的。尝试：

box.innerHTML += '<div id="ball" style="left:' + x + 'px;top:' + y + 'px;"></div>';

在JavaScript中，您可以使用+将字符串连接在一起。

JS Fiddle

innerHTML可以动态吗？

4 个答案: