Tengo que este código que quiero que agregue las palabras que solicito por pantalla en forma de lista, pero solo agrega la ultima palabra, no se que estoy haciendo mal.
Es el html y el estilo.
<head>
<title></title>
<style type="text/css">
ol,li{
list-style-type: none;
}
</style>
</head>
<body>
<h2>PALABRAS</h2>
<div id=".">
<p>Frase:</p>
<ol></ol>
</div>
</body>
</html>
Esto es el script, hago un appendChild a lista en bucle for pero remplazada los elementos.
let frase;
let size=1;
frase =prompt("Introduce Frase");
if(frase === null){
alert("No hay frase");
}else{
let li = document.createElement("li");
size = 1; //'1 rem' 1+(1*0.25)
let ol = document.getElementById(".").querySelector("ol");
frase = frase.split(" ");
for(let d of frase){
li.textContent=d;
ol.appendChild(li);
console.log(ol);
}
}
li
y dentro de tu bucle le asignas todos los valores diferentes... pero sigue siendo el mismo elemento li. Probaste a crear elli
dentro del bucle?li
dentro del ciclo, porque appendChild() crea un elemento solo si no existe, de lo contrario, lo mueve al contenedor deseado.