事件侦听器“点击”需要点击两次才能调用 function

Question

I have the following code:

if (this === declared.foodToChangeInput) {
            Utilities.deleteSecondInputListSuggestion()
            const html = sortedArray.map(food => {
                
                return `<li onclick="handleClickFirstInputListSuggestions(this.innerText)">${food.description}</li>`
            }).join('')
    
            declared.foodToChangeInputSuggestions.innerHTML = html
        } else if (this === declared.foodChoosenInput) {
            Utilities.deleteFirstInputListSuggestion()
            const html = sortedArray.map(food => {
                return `<li onclick="handleClickSecondInputListSuggestions(this.innerText)">${food.description}</li>`
            }).join('')
    
            declared.foodChoosenSuggestions.innerHTML = html
        }
    }

The problem is: i'm needing click two times in a item on the list so i can call the function. I also noticed that after the first click, the second works in any li, not only in the specifc li i clicked for the first time. When i press 'tab' and start focusing the list, the click works as it should be.

I changed the code removing the onclick and adding a addEventListener, example:

if (this === declared.foodToChangeInput) {
            Utilities.deleteSecondInputListSuggestion()
            const html = sortedArray.map(food => {
                
                return `<li>${food.description}</li>`
            }).join('')
    
            declared.foodToChangeInputSuggestions.innerHTML = html

            const list = foodToChangeInputSuggestions.querySelectorAll('li')

            list.forEach(li => li.addEventListener('click', event => {
                      handleClickFirstInputListSuggestions(event.target.innerText)}))

The code above also didn't work as expected. To see the full code you can check my repository: https://github.com/nicolasjandre/foodexchange

And here you can see the problem (its when you digit something on input, it will show you the suggestions that match with the input.value and to click on it you need two clicks) https://nicolasjandre.github.io/foodexchange/

I don't know if it can help, but the unique way that i was able to make the click works fine was create a const with a create element, add innerText and addEventListener to it and append this element. But append dont works like innerHTML = so didnt solve my problem (i was getting all the array as suggestions and also repeated ones)

Answer 1

I discovered it!

What was making this error was the event that i seted up:

declared.foodChoosenInput.addEventListener('change', Matches.displayMatches)
declared.foodToChangeInput.addEventListener('change', Matches.displayMatches)
declared.foodChoosenInput.addEventListener('keyup', Matches.displayMatches)
declared.foodToChangeInput.addEventListener('keyup', Matches.displayMatches)

As you guys can see, it has a 'change' listener. In this situation, when i was clicking the first time on the list, it call the displayMatches again and refresh the list with a new one. Because of that i was needing two clicks to call the func.

I just removed the 'change' listener and know everything is working fine. I also refactored a little the code, removed the onclick and started use addEventListener:

 if (this === declared.foodToChangeInput) {
            Utilities.deleteSecondInputListSuggestion()
          
            const html = sortedArray.map(food => {
              const li = document.createElement('li')
              li.innerText = food.description
              li.addEventListener('click', event => Exchange.handleClickFirstInputListSuggestions(event.target.innerText))
              
              return li
            })
            declared.foodToChangeInputSuggestions.replaceChildren(...html)
        }

The code above is for clean code only. It didn't solve the problem. The solution was remove the 'change' listener.