javascript button is not working based on code-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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"  required />
    <input type="password"  required />
    <button >Submit</button>

You can even check whether email is valid or not just by adding type="email" in email input !

CodePudding user response：

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"  type="text" placeholder="email">
    <input id="passwordInput"  type="password" placeholder="password">
    <button id="button">login</button>
  </div>
</body>

CodePudding user response：

Just interchange the id & class values of inputs and changed the JS code accordingly. id must be unique.

const bars = document.getElementsByClassName('input');
const idbar = document.getElementById('id-bar');
const pwbar = document.getElementById('password-bar');
const button = document.getElementById('button');

for (bar of bars) {
    bar.addEventListener("keyup", () => {
        const id = idbar.value;
        const pw = pwbar.value;

        button.style.backgroundColor = (id.length && pw.length) ? "#0095F6" : "#C0DFFD"
    });
}

<div class = wrapper>
    <input id="id-bar"  type="text" placeholder="email"> 
    <input id="password-bar"  type="password" placeholder="password">
    <button id="button">login</button>  
</div>