更改表中的输入类型

Question

I'm trying to change the type of the displayed input Text in a row from text to password. It changes the type like I want, but the displayed text doesn't change from visible to invisible..

 function changeType() { var x = document.getElementById("Table").rows[1].cells; var value = x[0].value; if (x[0].type == "password") { x[0].type = "text"; } else { x[0].type = "password"; } } 

 <table id="Table" class="table table-bordered table-dark table-striped table-hover"> <tr> <th>website</th> <th>username</th> <th> <input type="checkbox" onclick="changeType()"> password </th> </tr> <td><input type="password" value="1234567" readonly="readonly"></td> <td><input type="text" value="9876543" readonly="readonly"></td> <td><input type="text" value="simpleTest" readonly="readonly"></td> </table> 

Answer 1

You can make this very easy using querySelector on your own code as below:

 function changeType() { var x = document.querySelector("input.password"); var value = x.value; if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } 

 <table id="Table" class="table table-bordered table-dark table-striped table-hover"> <tr> <th>website</th> <th>username</th> <th> <input type="checkbox" onclick="changeType()"> password </th> </tr> <td><input type="password" class="password" value="1234567" readonly="readonly"></td> <td><input type="text" value="9876543" readonly="readonly"></td> <td><input type="text" value="simpleTest" readonly="readonly"></td> </table> 

I hope I've been useful! :)

References:

• How do I get the value of text input field using JavaScript?

Answer 2

Issues with your HTML and JavaScript are mentioned in comments:

1. Missing <tr> around <td> elements.
2. x refers to a table cell, not an input.

In your context, I'd simplify by giving each element its own ID.
That way you don't need to traverse the DOM.

Feel free to use the inline onclick method in your original code.
I've changed it to addEventListener out of my own preference.

 function toggleType(input) { input.type = (input.type == 'password') ? 'text' : 'password'; } var pass_input = document.getElementById("pass_input"); var pass_toggle = document.getElementById('pass_toggle'); pass_toggle.addEventListener('change', function() { toggleType(pass_input) }); 

 th { text-align: left; } label { cursor: pointer; } 

 <table> <thead> <tr> <th>website</th> <th>username</th> <th> <label><input type="checkbox" id="pass_toggle"> password</label> </th> </tr> </thead> <tbody> <tr> <td><input type="text" value="simpleTest" readonly="readonly"></td> <td><input type="text" value="9876543" readonly="readonly"></td> <td><input type="password" id="pass_input" value="1234567" readonly="readonly"></td> </tr> </tbody> </table>