Answer to Question #303410 in HTML/JavaScript Web Application for taufiq umar

Question #303410

using Conversions and Conditional Statements.;
When the HTML button element with the id signInBtn is clicked,
If the username is empty then show the Please Enter Username message in the HTML paragraph element with the id messageText
If the username is not empty and the password is empty then show the Please Enter Password message in the HTML paragraph element with the id messageText
If the username and password are not empty then show the Welcome message in the HTML paragraph element with the id messageText

Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <input type="text" id="username" placeholder="Name">
    <input type="text" id="password" placeholder="Password">
    <button id="signInBtn">Login</button>
    <div id="messageText"></div>
</body>
<script>
    const username = document.querySelector('#username'),
          password = document.querySelector('#password'),
          btn = document.querySelector('#signInBtn'),
          message = document.querySelector('#messageText');

    btn.addEventListener('click', () => {
        if (!username.value) {
            message.innerHTML = 'Please Enter Username'
        } else if (!password.value) {
            message.innerHTML = 'Please Enter Password'
        } else {
            message.innerHTML = 'Welcome'
        }
    })
</script>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #303410 in HTML/JavaScript Web Application for taufiq umar

Comments

Leave a comment

Related Questions