Multiple ID In Javascript Function Not Working

Question

I am trying to toggle the password on two fields with different ids using one JavaScript code but it isn't working.

One field works fine but the other doesn't respond, I have tried different solutions but I am not getting it right.

Any help will be appreciated.

See code below;

const togglePassword = document.querySelectorAll("#togglePassword, #togglePassword23");
        const password = document.querySelectorAll("#input2, #signup3");
        

        togglePassword.addEventListener("click", function toggle() {
            // toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
            password.setAttribute("type", type);
            
            // toggle the icon
            this.classList.toggle("bi-eye");
        });

<input type="password" id="input2" autocomplete="new-password"><br/>
<input id="togglePassword" type="button" value="Toggle password 1" onclick="toggle();">
      <br/> <br/>
      
<input type="password" id="signup3" autocomplete="new-password"><br/>
<input id="togglePassword23" type="button" value="Toggle password 2" onclick="toggle();">

Ids must be unique on a page. You have two the same.

Andy
– Andy

2022-08-19 17:32:04 +00:00
Commented Aug 19, 2022 at 17:32 — Andy
– Andy, Commented Aug 19, 2022 at 17:32

ikos23 · Accepted Answer · 2022-08-19 17:26:18Z

1

You can find more details in the docs. In a nutshell - it returns an element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.

p.s. Also, there is a typo in this line (I guess):

const password = document.querySelector("#input2, #input2"); // input2 input2 ???

answered Aug 19, 2022 at 17:26

ikos23

5,48212 gold badges46 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hippobrainz Over a year ago

I have edited my question with the solutions suggested by you, Andy, and ikos23 and it didn't solve the problem.

James Over a year ago

@BABOSAMMONG now your question is a dupe of stackoverflow.com/questions/54937271/…

Laslos · Accepted Answer · 2022-08-19 18:27:00Z

0

This is a working version of somewhat what you are trying to do. Should at least give you an idea of what was wrong with what you were trying:

const togglePassword = document.querySelectorAll("#togglePassword1, #togglePassword2");
const password = document.querySelectorAll("#input2, #input3");
        
togglePassword.forEach(function(item, index){
  item.addEventListener("click", function toggle() {
      // toggle the type attribute
      const type = password[index].getAttribute("type") === "password" ? "text" : "password";
      password[index].setAttribute("type", type);
    });
});

<input type="password" id="input2" autocomplete="new-password"><br/>
<input id="togglePassword1" type="button" value="Toggle password 1" >
<br/> <br/>
<input type="password" id="input3" autocomplete="new-password"><br/>
<input id="togglePassword2" type="button" value="Toggle password 2" >

answered Aug 19, 2022 at 18:27

Laslos

3601 gold badge8 silver badges19 bronze badges

1 Comment

Hippobrainz Over a year ago

Thanks Laslos, You rock!

Collectives™ on Stack Overflow

Multiple ID In Javascript Function Not Working

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related