innerHTML可以動態嗎？

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

在JavaScript中，您可以使用+連接字符串。

JS Fiddle

Answer 3

這應該工作，

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 4

我認爲這是沒有必要使用大量的div具有相同的ID。最好定義他們的類

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