Я хочу напечатать сообщение только один раз, если поле ввода пустое и пользователь нажимает ввод с пустым вводом. где я иду не так

Question

form.addEventListener('submit', (e) => { //create new invitee name
let text = input.value; //collect text value from input field
let counter = 0;
if (text != "") {
    createLI(text); //executes function to add new invitee. 
} else {. /*if text field is blank error message to be printed only once regardless on multiple entries with blank input*/

    const errorText = document.getElementById('enterName');
    const label = document.createElement('label');
    label.textContent = "please enter your full name";
    label.setAttribute("style", "color: red");
    if (counter == 0) {
        errorText.appendChild(label);
        counter += 1;
    }
}
});

Answer 1

Проблема с let counter = 0;

Объявите это вне обратного вызова слушателя событий. Как

 let counter = 0;
 form.addEventListener('submit', (e) => { //create new invitee name
  let text = input.value; //collect text value from input field
   ....

Что не так с вашим кодом, так это то, что каждый раз, когда происходит событие, оно снова устанавливает counter на 0, и вы добавляете ребенка.

Answer 2

Вам необходимо объявить counter вне функции, в противном случае он сбрасывается каждый раз, когда пользователь отправляет форму.

let counter = 0;
form.addEventListener('submit', (e) => { /* Your awesome eventhandler */ });

Это происходит потому, что JavaScript удаляет вашу переменную после завершения функции и повторно объявляет ее при повторном запуске события. Так что на самом деле реинициализирует counter.

PROTIP : используйте bool вместо int, так что вы можете просто

if (messageShowed) { /* Insert some code */ }