Mayank Bhardwaj Mayank Bhardwaj - 5 months ago 25
Javascript Question

using one javascript function for multiple ids

I have three fields in a form,and I want the user to be able to see what he has written when he hovers over an image. Works fine for one field("enter old password").I want to use the Same Javascript function for the other two ("enter new password" , "confirm new password")

<form action="changepw.php" method="post">
<label>Enter Old Password</label>
<input type="password" name="oldp" placeholder="old password" id="pw" required>&nbsp;
<img src="\ExTrac\images\eye.png" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" >

</br></br>

<label>Enter New Password</label>
<input type="password" name="newpw" placeholder="new password" id="npw" required>&nbsp;
<img src="\ExTrac\images\eye.png" onmouseover="mouseoverPass1();" onmouseout="mouseoutPass1();" >

</br></br>
<label>Confirm New Password</label>
<input type="password" name="cnewpw" placeholder=" confirm new password" id="cpw" required>&nbsp;
<img src="\ExTrac\images\eye.png" onmouseover="mouseoverPass2();" onmouseout="mouseoutPass2();" >

</br></br>
<input type="submit" value="Submit" class="style3">
</form>

<script>
document.getElementsByClassName("pw").onmouseover = function(){
mouseoverPass(obj)
};
document.getElementsByClassName("pw").onmouseout = function() {
mouseoutPass(obj)
};

function mouseoverPass(obj) {
var obj = document.getElementById("pw");
obj.type = "text";
}
function mouseoutPass(obj) {
var obj = document.getElementById("pw");
obj.type = "password";
}
</script>

Answer
  • Give class to image elements to be selected using querySelectorAll / getElementsByClassName
  • Use previousElementSibling to get the previous element of the current element
  • Remove inline event listeners
  • Use [].forEach.call to use methods of Array over object having length property

var elems = document.querySelectorAll("form img.eye");
[].forEach.call(elems, function(el) {
  el.onmouseover = mouseoverPass;
  el.onmouseout = mouseoutPass;
});

function mouseoverPass() {
  this.previousElementSibling.type = "text";
}

function mouseoutPass() {
  this.previousElementSibling.type = "password";
}
img {
  width: 30x;
  height: 20px;
  cursor: pointer;
}
<form action="changepw.php" method="post">
  <label>Enter Old Password</label>
  <input type="password" name="oldp" placeholder="old password" id="pw" required>&nbsp;
  <img src="http://vignette1.wikia.nocookie.net/narutofanon/images/3/3d/Eye-Symbol_(1).png" class="eye">
  <br>
  <br>
  <label>Enter New Password</label>
  <input type="password" name="newpw" placeholder="new password" id="npw" required>&nbsp;
  <img src="http://vignette1.wikia.nocookie.net/narutofanon/images/3/3d/Eye-Symbol_(1).png" class="eye">
  <br>
  <br>
  <label>Confirm New Password</label>
  <input type="password" name="cnewpw" placeholder=" confirm new password" id="cpw" required>&nbsp;
  <img src="http://vignette1.wikia.nocookie.net/narutofanon/images/3/3d/Eye-Symbol_(1).png" class="eye">
  <br>
  <br>
  <input type="submit" value="Submit" class="style3">

Comments