Variablenwert in innerHTML- sind für die Eingabe-IDs und Platzhalter

Question

document.getElementById('addplace').addEventListener('click', addplace); 
 

 
j=1; 
 
function addplace() { 
 
    var node = document.createElement("li"); // Create a <li> node 
 
    node.innerHTML = "<input id=''place'+j+' placeholder='+j+' onFocus='geolocate()' type='text' />"    
 
    document.getElementById("waypoints").appendChild(node); 
 
    j++; 
 
}

<ul id="waypoints"></ul> 
 
<input id="addplace" type="submit"/>

Anstelle des Fließtext Index erstellen ‚+ j +‘ als Platzhalter erscheinen ich einen laufenden Index 1, 2, 3, usw. wollen Ich möchte es schließlich wie "Waypoint 1" "Waypoint 2" "Waypoint 3" als Platzhalter haben, ebenso wie bei den IDs möchte ich, dass sie Platz 1, Platz 2, Platz 3 usw. sind. Danke für deine Hilfe. Ich habe andere verwandte Fragen gesehen, die darauf hindeuten, dass + Zeichen verketten, aber es scheint nicht für diese Anwendung zu funktionieren.

Answer 1

Sie verwenden nur die falschen Anführungszeichen:

node.innerHTML = "<input id='place" + j +"' placeholder='" + j + "' onFocus='geolocate()' type='text' />"; 

Dies wird die Saite perfekt und geben Sie Ihre Nummer entsprechend verketten.

EDIT

nur für die Zukunft, hat es6 die Fähigkeit, "Template Strings" Wich zu schaffen, ist noch nicht verwendbar in jedem Browser:

node.innerHTML = `<input id="place ${j}" placeholder="${j}" onFocus="geolocate()" type="text" />`; 

Answer 2

Ich glaube, Sie setzen müssen „s Ende Saiten:

node.innerHTML = "<input id='place" +j+ "' placeholder='" +j+ "' onFocus='geolocate()' type='text' />" 

Answer 3

das ist keine Antwort auf Ihre Frage, aber man konnte den Code ein wenig reinigen, indem diesetzenCallback-Funktion in den Event-Handler als Argument wie folgt:

document.getElementById('addplace').addEventListener('click', addplace)