Klicken Sie auf einen neuen div

ich dieses kleine Code heute gemacht:Klicken Sie auf einen neuen div

document.getElementById("pays" + nb_items).onclick = function() { 
    var div = document.createElement('div'); 
    div.className = 'tata'; 
    div.setAttribute("id", "pays" + ++nb_items); 
    document.getElementById("country").appendChild(div); 
};

Und ich habe ein JS Problem, denke ich.

Wenn ich auf ein div # 1 klicke, erstellt es ein neues div # 2 und ich möchte auf das div # 2 klicken, um ein div # 3 zu erstellen und so weiter.

Eigentlich werden die neuen divs nur hinzugefügt, wenn ich auf div # 1 klicke. Irgendeine Idee von was habe ich falsch gemacht? Danke!

Quelle

2017-01-11 Poptocrack

Der Ereignishandler wird nicht automatisch an neu hinzugefügte Elemente angehängt. – Amy

Sie haben nie 'eventListener' für neu erstellte' div' hinzugefügt –

Sie können Ereignis an das übergeordnete Element Land binden statt div zu jeder anhängt

Überprüfung dieser Ausschnitt

var nb_items = 1; 
 

 
window.onload = function() { 
 
    var colors = ["black", "orange", "yellow"] 
 
    document.querySelector('.country').addEventListener('click', function(event) { 
 
    if (event.target.nodeName === "DIV") { 
 
     var div = document.createElement('div'); 
 
     div.className = 'tata'; 
 
     div.setAttribute("id", "pays" + ++nb_items); 
 
     div.style.backgroundColor = colors[nb_items]; 
 
     document.getElementById("country").appendChild(div); 
 
    } 
 
    }) 
 

 
};

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    margin: 0; 
 
} 
 
.top-bar { 
 
    background-color: blue; 
 
    min-height: 16vh; 
 
} 
 
.country { 
 
    display: flex; 
 
    justify-content: center; 
 
    min-height: 70vh; 
 
    width: 100%; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    background-color: green; 
 
    height: 14vh; 
 
    width: 100%; 
 
} 
 
.toto { 
 
    background-color: coral; 
 
    width: 100%; 
 
} 
 
.tata { 
 
    width: 100%; 
 
}

<body> 
 
    <div class="top-bar"> 
 
    <!-- Local clock --> 
 
    </div> 
 
    <div id="country" class="country"> 
 
    <div id="pays1" class="toto"> 
 
    </div> 
 
    <!-- pays --> 
 
    </div> 
 
    <div class="footer"> 
 
    </div> 
 
</body>

Hope, das hilft

Quelle

2017-01-11 20:45:13 Geeky

Sie sind nicht das Hinzufügen und eventListener auf die neue erstellt div

var div = document.createElement('div'); 
div.className = 'tata'; 
div.setAttribute("id", "pays" + ++nb_items); 
div.addEventListener("click",function(){ 
//create the div#3 here 
}); 
document.getElementById("country").appendChild(div);

Quelle

2017-01-11 20:43:33 Roljhon

Sie müssen eventListener hinzufügen für neu erstellte div

schaffen getrennte listener Funktion und binden sie jedes dynamisch erstellt Div,;

var listener = function() { 
    var div = document.createElement('div'); 
    div.className = 'tata'; 
    div.setAttribute("id", "pays" + ++nb_items); 
    div.onclick = listener; 
    document.getElementById("country").appendChild(div); 
};

aktualisiert codepen

Quelle

2017-01-11 20:44:54

Klicken Sie auf einen neuen div

Antwort

Verwandte Themen