Блог

Я пытаюсь сначала проверить, не пусты ли оба поля. если пусто, предупредите пользователя, что оно пустое. Затем проверьте, совпадают ли данные пользователя и пароля, и если они совпадают, то предупредите («добро пожаловать»). но если я наберу что-нибудь в полях, оно пройдет и скажет «Добро пожаловать»? Помогите!

 const container = document.querySelector('.container');
const userInput = document.querySelector('#username');
const passInput = document.querySelector('#password');
const button = document.querySelector('button');

button.addEventListener('click', () => {
    if (!userInput.value || !passInput.value) {
        alert('One or more fields are empty. Please enter password and username');
    }
    if (!userInput.value == 'user21' || !passInput.value == 'user21') {
        alert('password or username inavlid')
    } else if (userInput.value == 'user21' amp;amp; passInput.value == 'user21') {
        alert(`Welcome ${userInput.value}`);
    }
})*
 

Удалите * в конце вашего кода и поместите ;

Этот:

 if (!userInput.value == 'user21' || !passInput.value == 'user21') {
 

оценивает ! первый. Это похоже на:

 if ((!userInput.value) == 'user21' || (!passInput.value) == 'user21') {
 

что, конечно, не приведет к нужному вам сравнению.

Проверьте, совпадают ли имя пользователя и пароль, и если они не совпадают, просто введите обычный else , без else if там.

 button.addEventListener('click', () => {
    if (!userInput.value || !passInput.value) {
        alert('One or more fields are empty. Please enter password and username');
    } else if (userInput.value == 'user21' amp;amp; passInput.value == 'user21') {
        alert(`Welcome ${userInput.value}`);
    } else {
        alert('password or username inavlid')
    }
})
 

Также рассмотрите

• использование правильного модального вместо alert
• если это то, для чего вам нужна какая-либо разумная безопасность, проверьте учетные записи, используя внутреннюю базу данных, вместо того, чтобы жестко кодировать ее на интерфейсе (который можно легко обойти)