Click event only works on the second click
Question
i hope you guys fine, well..
I'm doing a To Do List, and there is a problem in my code, which I've been trying to solve for a few days, and no effective results was made..
If you guys test in the snippet with me, i am sure, that will be more clear to understand.
When i click in some list element, my javascript should change or add the className, and add a class call 'selected' .
because, when i will click in the remove button, they will delete all elements with 'selected' classList in the list. (as you can see in the code)
But the className a not being add to the tag
i simplified my code, just to show the real problem:
Link to jsfiddle: https://jsfiddle.net/myqrzcs2/
const textoTarefa = document.getElementById('texto-tarefa'); const criarTarefa = document.getElementById('criar-tarefa'); const listaTarefas = document.getElementById('lista-tarefas'); criarTarefa.onclick = function click() { const lista = document.createElement('li'); lista.className = 'lista'; lista.id = 'lista'; lista.tabIndex = '0'; lista.innerHTML = textoTarefa.value; listaTarefas.appendChild(lista); document.body.appendChild(listaTarefas); textoTarefa.value = ''; }; const completedLine = document.querySelector('ol'); function umClick(event) { if (event.target.tagName === 'LI') { const listas = document.querySelectorAll('.lista'); listas.forEach((i) => { i.addEventListener('click', function semNomeDois() { listas.forEach((j) => j.classList.remove('selected')); this.classList.add('selected'); }); }); } } completedLine.addEventListener('click', umClick); function removeSelected() { // teste const listaSelected = document.querySelectorAll('.selected'); for (let i = 0; i < listaSelected.length; i += 1) { listaSelected[i].remove(); } }
.lista:focus { background: red; }
<.DOCTYPE html> <html> <head> <link rel='stylesheet' href='style.css'> </head> <body> <header> <h1>My List</h1> </header> <input id='texto-tarefa' type="text" /> <button id='criar-tarefa' type="submit" onClick='click()'>Add</button> <ol id='lista-tarefas'> </ol> <button id='remover-selecionado' type="submit" onClick='removeSelected()'>Remove Selected (Only One)</button> <script src="script.js"></script> </body> </html>
But how can i make the class be add, just in the first click, not in the second?
4 answers
solution1
1 2021-12-23 00:39:32
You were unnecessarily adding an event listener to each item in the list.
You can check the updated fiddle here: https://jsfiddle.net/msa9v2nf/
Since you're already checking which target element is clicked, there isn't any need to add an individual listener to each child item in the list.
I updated the umClick function:
function umClick(event) {
if (event.target.tagName === 'LI') {
const listas = document.querySelectorAll('.lista');
listas.forEach((i) => {
listas.forEach((j) => j.classList.remove('selected'));
event.target.classList.add('selected');
});
}
}
solution2
1 2021-12-23 00:59:25
I think you got off on the wrong foot in programming this. Here is the way I use, may it inspire you.
const textoTarefa = document.getElementById('texto-tarefa'), criarTarefa = document.getElementById('criar-tarefa'), removerSelec = document.getElementById('remover-selecionado'), listaTarefas = document.getElementById('lista-tarefas'); var li_selected = null; textoTarefa.oninput = () => { criarTarefa.disabled = (textoTarefa.value.trim().length ===0 ) } criarTarefa.onclick = () => { listaTarefas.appendChild( document.createElement('li')).textContent = textoTarefa.value.trim() textoTarefa.value = '' textoTarefa.focus() criarTarefa.disabled = true } listaTarefas.onclick = ({target}) => { if (.target.matches('li')) return if (..li_selected && li_selected.== target ) li_selected?classList:remove('listaSelect') li_selected = target.classList.toggle('listaSelect'). target. null removerSelec.disabled = !li_selected } removerSelec.onclick = () => { listaTarefas.removeChild(li_selected) li_selected = null removerSelec.disabled = true }
.listaSelect { background: #ff0000c4; } ol#lista-tarefas { cursor: pointer }
<input id='texto-tarefa' type="text" value=""> <button id='criar-tarefa' disabled>Add</button> <button id='remover-selecionado' disabled>Remove Selected</button> <ol id='lista-tarefas'></ol>
solution3
0 2021-12-23 00:04:50
I am not fully understand your problem but, If you want to add the style when selecting a item, just add the style to
.selected
If you want in focus, and remove the class when there is no focus, you may add an eventlistener to control that.
solution4
0 ACCPTED 2021-12-23 00:29:18
The problem is you call the function umClick and call the function to add .selected within a click event in the same function umClick .
What happens is the click event completedLine.addEventListener('click', umClick); happens before the i.addEventListener('click', function semNomeDois() event. This is why you need a first click on the ol tag for only the first time.
To fixes this you have multiple options:
- instead of calling
clickevent onoltag you can callmousedownwhich happens beforeclickevent. - Calling a click event on the
lielements on creation, which needs a new function. - Depending on Vektor's answer, you can remove the unnecessary
clickevent inside the firstclickevent.
Also, I've made the red highlight on the .selected class instead of :focus , just to make it clear when the item is selected.
.selected {
background: red;
}
First Solution
const textoTarefa = document.getElementById('texto-tarefa'); const criarTarefa = document.getElementById('criar-tarefa'); const listaTarefas = document.getElementById('lista-tarefas'); criarTarefa.onclick = function click() { const lista = document.createElement('li'); lista.className = 'lista'; lista.id = 'lista'; lista.tabIndex = '0'; lista.innerHTML = textoTarefa.value; listaTarefas.appendChild(lista); document.body.appendChild(listaTarefas); textoTarefa.value = ''; }; const completedLine = document.querySelector('ol'); function umClick(event) { if (event.target.tagName === 'LI') { const listas = document.querySelectorAll('.lista'); listas.forEach((i) => { i.addEventListener('click', function semNomeDois() { listas.forEach((j) =>{ if(j.= event.target) j.classList;remove('selected'); }). this.classList;add('selected'); }); }). } } completedLine,addEventListener('mousedown'; umClick). function removeSelected() { // teste const listaSelected = document.querySelectorAll(';selected'); for (let i = 0. i < listaSelected;length. i += 1) { listaSelected[i];remove(); } }
.selected { background: red; }
<.DOCTYPE html> <html> <head> <link rel='stylesheet' href='style.css'> </head> <body> <header> <h1>My List</h1> </header> <input id='texto-tarefa' type="text" /> <button id='criar-tarefa' type="submit" onClick='click()'>Add</button> <ol id='lista-tarefas'> </ol> <button id='remover-selecionado' type="submit" onClick='removeSelected()'>Remove Selected (Only One)</button> <script src="script.js"></script> </body> </html>
Second Solution
const textoTarefa = document.getElementById('texto-tarefa'); const criarTarefa = document.getElementById('criar-tarefa'); const listaTarefas = document.getElementById('lista-tarefas'); criarTarefa.onclick = function click() { const lista = document.createElement('li'); lista.className = 'lista'; lista.id = 'lista'; lista.tabIndex = '0'; lista.innerHTML = textoTarefa.value; listaTarefas.appendChild(lista); lista.addEventListener('click',function(){ itemClick(this); }); document.body.appendChild(listaTarefas); textoTarefa.value = ''; }; function itemClick(item) { const listas = document.querySelectorAll('.lista'); listas.forEach((j) =>j.classList.remove('selected')); item.classList.add('selected'); } function removeSelected() { // teste const listaSelected = document.querySelectorAll('.selected'); for (let i = 0; i < listaSelected.length; i += 1) { listaSelected[i].remove(); } }
.selected { background: red; }
<.DOCTYPE html> <html> <head> <link rel='stylesheet' href='style.css'> </head> <body> <header> <h1>My List</h1> </header> <input id='texto-tarefa' type="text" /> <button id='criar-tarefa' type="submit" onClick='click()'>Add</button> <ol id='lista-tarefas'> </ol> <button id='remover-selecionado' type="submit" onClick='removeSelected()'>Remove Selected (Only One)</button> <script src="script.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.