Tengo el siguiente enlace para que puedan ver el código:
Me gustaría hacer el código más eficiente:
También intento que la secuencia empiece desde 0 y no con elementos inicializados como los lista o elementos < li >.
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadTengo el siguiente enlace para que puedan ver el código:
Me gustaría hacer el código más eficiente:
También intento que la secuencia empiece desde 0 y no con elementos inicializados como los lista o elementos < li >.
El hecho de que quieras que la lista inicie vacía es una "limitante" para que el código sea más corto pues tienes que hacer algunas validaciones para evitar errores.
function nuevoNumeroFibonacci() {
const ul = document.getElementById('serie');
const serie = Array.prototype.slice.call(ul.getElementsByTagName('li'), 0);
let nuevoElemento;
if (serie.length === 0) nuevoElemento = 0;
if (serie.length === 1) nuevoElemento = 1;
if (serie.length > 1) nuevoElemento = parseInt(serie.pop().innerHTML) + parseInt(serie.pop().innerHTML);
const newLi = document.createElement('li');
newLi.innerHTML = nuevoElemento;
ul.appendChild(newLi);
}
* {
font-family : 'Roboto Condensed', sans-serif;
}
.title {
font-family : 'Roboto Condensed', sans-serif;
text-align : center;
line-height : 40px;
color : rgb(0, 0, 0);
font-weight : 200;
text-transform: uppercase;
}
.div-padre {
display: block;
text-align : center;
}
ul {
text-align: left;
display:inline-block;
}
li {
list-style:none;
text-align: center;
margin: 2%;
width: 2%;
display: flex;
flex-direction: column;
align-items: center;
}
button {
color : #fff;
font-weight : light;
background-color: #6b81ff;
width : 100px;
font-size : 1em;
box-shadow : 0px 0px 2px 1px black;
border : none;
display : block;
margin-left : auto;
margin-right : auto;
outline: none;
}
<h1 class="title"> FIBONACCI </h1>
<button onclick="nuevoNumeroFibonacci()">Siguiente</button>
<div class="div-padre">
<ul id="serie"></ul>
</div>
Otra opción para evitar "reconstruir" la serie ya generada pero no más corta aunque pienso que es igual o mejor legible, es separar el cálculo de la serie:
let elemento = 0;
const serie = [0, 1];
function nuevoNumeroFibonacci(){
const ul = document.getElementById('serie');
const newLi = document.createElement('li');
newLi.innerHTML = series(elemento);
ul.appendChild(newLi);
elemento ++;
}
function series(n) {
if(n === 0) return serie[n];
if(n === 1) return serie[n];
serie.push(serie[n-1] + serie[n-2]);
return serie[n];
}
Nota también que he agregado un id al ul
para no hacer tan genérica su búsqueda.