I am trying to make login button enabled and color change to darker blue when there is at least one input for both id and password. (I have not implemented enabling portion yet.) Yet, above code does not seem to work. Could anyone help? Thanks!
const button = document.getElementById('button');
const idbar = document.getElementsByClassName('id-bar')[0];
const pwbar = document.getElementsByClassName('password-bar')[0];
const bar = document.getElementById('input')
bar.addEventListener("keyup", () =>{
const id = idbar.value;
const pw = pwbar.value;
if (id.length > 0 && pw.length > 0) {
button.style.backgroundColor = "#0095F6"
} else {
button.style.backgroundColor = "#C0DFFD"
}
});<head>
<script src="js/login.js"></script>
</head>
<body>
<div class = wrapper>
<input id = "input" class = "id-bar" type = "text" placeholder = "email">
<input id = "input" class = "password-bar" type = "password" placeholder = "password">
<button id = "button">login</button>
</div>
</body>id should be unique...
if not using id
const button = document.getElementById('button');
const idbar = document.getElementsByClassName('id-bar')[0];
const pwbar = document.getElementsByClassName('password-bar')[0];
const bar = document.getElementsByTagName("input");
[...bar].forEach(bar => {
bar.addEventListener("keyup", () =>{
const id = idbar.value;
const pw = pwbar.value;
if (id.length > 0 && pw.length > 0) {
button.style.backgroundColor = "#0095F6"
} else {
button.style.backgroundColor = "#C0DFFD"
}
});
})<head>
<script src="js/login.js"></script>
</head>
<body>
<div class = wrapper>
<input id = "input" class = "id-bar" type = "text" placeholder = "email">
<input id = "input" class = "password-bar" type = "password" placeholder = "password">
<button id = "button">login</button>
</div>
</body>So the problem with your code is that you are using id for targeting two element which is not possible and many have answered it, but I have a different suggestion which is CSS.
.submit {
background-color: #c0dffd;
}
.email-input:valid + .password-input:valid + .submit {
background-color: #0095f6;
} <input type="text" class="email-input" required />
<input type="password" class="password-input" required />
<button class="submit">Submit</button>You can even check whether email is valid or not just by adding type="email" in email input !
Your ids/classes are kind of all over the place, and as @dangerousmanleesanghyeon mentions, they don't conform to proper usage. Might be worth your time briefly reading up on how to use them correctly, via MDN: CSS selectors.
Anyway, I've refactored your code a little, and replaced the getElementBys with more versatile querySelectors, which is a great method to use, and might save you from some future headaches along your coding journey.
Just a note: querySelectorAll (used to get both the bars) returns a NodeList, which I've had to make into an Array in order to use map. This might feel a little complex right now, but these are useful concepts to familiarise yourself with!
const button = document.querySelector('#button')
const idbar = document.querySelector('#idInput')
const pwbar = document.querySelector('#passwordInput')
const bars = document.querySelectorAll('.input')
Array.from(bars).map(bar => bar.addEventListener("keyup", () => {
const id = idbar.value
const pw = pwbar.value
if (id.length > 0 && pw.length > 0) {
button.style.backgroundColor = "#0095F6"
} else {
button.style.backgroundColor = "#C0DFFD"
}
}))<head>
<script src="js/login.js"></script>
</head>
<body>
<div class=wrapper>
<input id="idInput" class="input" type="text" placeholder="email">
<input id="passwordInput" class="input" type="password" placeholder="password">
<button id="button">login</button>
</div>
</body>