I am creating a project of a course, I give you a screenshot of the project:
On the left side there is a New Project button , clicking it creates entries and pressing enter adds the text of the entries to the list under Projects .
I would like that when pressing New Project , only one input is created and not several, because if several are opened as in the image. In the image, it would be the example, 4 inputs were opened and the first one wrote This will be repeated 4 , 4 elements will be added to the list validating This will be repeated 4 .
And I would like that after the input is added to the list, right there, by touching New Project another input is created
Now I pass the code of the 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>
And now the scripts.js code
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);
};
What I tried was to add:
Once:true
to the eventListener, looking like this:
document.querySelector('.crear-proyecto a').addEventListener('click', nuevoProyecto,{once:true});
But that's not quite an effective solution, since after adding an element, tapping the button doesn't create a new entry.
As they say in the comments, one possibility is to count the pre-existing inputs and, depending on this, perform the action or not. Another way can be simply adding a flag, which is true or false depending on whether or not we want to add inputs.
But in my opinion, the most user-friendly would either be that the button itself does not appear when it is not possible to add another project or that it appears disabled. Here is an example that hides the button:
the problem you have is with the life cycle of Capturing events, Bubbling it would be good if you investigate about it.
However, to get out of trouble you can solve it by verifying the source of the event in the following way: