Kann innerHTML dynamisch sein?

Question

Ich möchte Ball an verschiedenen Orten jedes Mal anhängen, wenn ich auf den Bildschirm klicke, aber ich kann nicht herausfinden, wie man box.innerHTML schreibt.

Skript:

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

Strings verketten, müssen Sie eine + zwischen der Saite und Ihre Variablen hinzuzufügen.

Answer 2

Ihre Verkettung ist falsch. Versuchen:

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

In JavaScript können Sie die Saiten zusammen verketten von + verwenden.

JS Fiddle

Answer 3

Dies sollte, arbeiten

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

Das Problem ist, dass die Variablen x und y als Strings identifiziert werden. Mit + können Sie sie verketten.

Für weitere Informationen empfehle ich hier Stringliterale Lesung über https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals

Answer 4

Ich denke, dass es nicht notwendig ist, eine Menge divs mit der gleichen ID zu verwenden. Es ist besser, sie für die Klasse zu definieren

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