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