Estoy creando un proyecto de un curso, les paso captura del proyecto:
En el lado izquierdo hay un boton Nuevo proyecto, al darle click se crean inputs y al dar enter, el texto de los inputs se agrega a la lista debajo de Proyectos.
Quisiera que al apretar Nuevo Proyecto, solo se cree un input y no varios, porque si se abren varios como en la imagen. En la imagen, seria el ejemplo, se abrieron 4 inputs y al primero le escribi Esto se va repetir 4, se van agregar 4 elementos a la lista valiendo Esto se va repetir 4.
Y quisiera que luego de que el input se agregue a la lista, recien ahi, al tocar en Nuevo Proyecto se cree otro input
Ahora les paso el código del sidebar.php
<aside class="contenedor-proyectos">
<div class="panel crear-proyecto">
<a href="#" class="boton">Nuevo Proyecto <i class="fas fa-plus"></i> </a>
</div>
<div class="panel lista-proyectos">
<h2>Proyectos</h2>
<ul id="proyectos">
<li>
<a href="#">
Diseño Página Web
</a>
</li>
<li>
<a href="#">
Nuevo Sitio en wordPress
</a>
</li>
</ul>
</div>
</aside>
Y ahora el código del scripts.js
eventListeners();
//lista de proyectos
var listaProyectos = document.querySelector('ul#proyectos');
function eventListeners(){
//boton para crear proyecto
document.querySelector('.crear-proyecto a').addEventListener('click', nuevoProyecto);
};
function nuevoProyecto(e){
e.preventDefault();
console.log('Presionaste en nuevo proyecto');
// crea input para nombre del new proyecto
var nuevoProyecto = document.createElement('li');
nuevoProyecto.innerHTML = '<input type="text" id="nuevo-proyecto"></input>';
listaProyectos.appendChild(nuevoProyecto);
//selecionar id con el nuevo proyecto
var inputNuevoProyecto = document.querySelector('#nuevo-proyecto');
// al presionar enter creal el proyecto
inputNuevoProyecto.addEventListener('keypress', function(e){
var tecla = e.which || e.keycode;
if(tecla === 13) {
guardarProyectoBD(inputNuevoProyecto.value);
listaProyectos.removeChild(nuevoProyecto);
};
});
};
function guardarProyectoBD(nombreProyecto){
// inyectar html
var nuevoProyecto = document.createElement('li');
nuevoProyecto.innerHTML = `
<a href="#">
${nombreProyecto}
</a>
`;
listaProyectos.appendChild(nuevoProyecto);
};
Lo que intenté, fue agregarle:
Once:true
al eventListener, quedando asi:
document.querySelector('.crear-proyecto a').addEventListener('click', nuevoProyecto,{once:true});
Pero eso no es una solución del todo efectiva, ya que después de agregar un elemento, al tocar el botón no se crea un nuevo input.
nuevoProyecto
– Dariel Ramos Díaz de Villegas el 27 ago. 19 a las 19:57