JavaScript function triggered by a clickable <div> tag to change image source of an <img&gt-CodePudding

The JavaScript function to change the image source is not working.

This is my code:

function eye() {
  fun();
  fun1();
}

function fun() {
  if (document.getElementById("password").type == "text") {
    document.getElementById("password").type = "password";
  } else if (document.getElementById("password").type == "password") {
    document.getElementById("password").type = "text";
  }
}

function fun1() {
  if (document.getElementById("eye").src == "eyec.png") {
    document.getElementById("eye").src = "eye.png";
  } else if (document.getElementById("eye").src == "eye.png") {
    document.getElementById("eye").src = "eyec.png";
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="login.css">
</head>

<body>
  <header>
    <button  onclick="start()">
                <img  src="menu.png" alt="menu" id="icon-menu">
            </button>
    <img  src="logo.png" alt="logo" />
    <header/>

    <form action="login-ctrl.php" method="post">
      <div >
        <label for="email">Email:<br><input type="email"   placeholder="input email...." name="email"/></label><br>
        <label  for="password">Password:<br><input type="password"   id="password"  placeholder="input password...." name="password"/><div onclick="eye()" ><img src="eye.png" id="eye"></div></label>
        <button  type="submit" name="submit">login</button>
      </div>
    </form>

</body>
<script src="index.js"></script>
<script src="login.js"></script>

</html>

I have tried writing the functions in different scripts, but it still didn't work, it is supposed to change the source of the image to another when clicked first then back when clicked again.

CodePudding user response：

Here is a simplified version that doesn't require all of the extra javascript, just a few lines of javascript and some CSS.

For this answer, I'm using javascript to detect the click and change the type.

From there, in CSS I'm changing the button's background based on type of .password. I changed the HTML so that the div is a button and it doesn't have an inline onclick nor an img tag in side.

In CSS, you can easily give the button different width/height and change the background to an image.

let pw = document.querySelector("#password");
let eye = document.querySelector(".eye-btn");

eye.addEventListener("click",(e) => {
   pw.type = (pw.type == "password") ? "text" : "password";
});

.eye-btn{
  width:15px;
  height:15px;
  outline:0;
  border:0;
 padding:0;margin:0;
}

.password[type='password'] ~ .eye-btn{
  background:green;
}

.password[type='text'] ~ .eye-btn{
  background:blue;
}

<input type="password" id="password"  placeholder="input password...." value="Text to see type change" name="password"/><button type="button" ></button>

CodePudding user response：

When you read the parameter document.getElementById("eye").src, it returns the complete file path, like file:///C:/Users/john/Documents/eye.png. You can replace it with getAttribute('src') method:

function eye() {
  fun();
  fun1();
}

function fun() {
  if (document.getElementById("password").type == "text") {
    document.getElementById("password").type = "password";
  } else if (document.getElementById("password").type == "password") {
    document.getElementById("password").type = "text";
  }
}

function fun1() {
  if (document.getElementById("eye").getAttribute("src") == "eyec.png") {
    document.getElementById("eye").src = "eye.png";
  } else if (document.getElementById("eye").getAttribute("src") == "eye.png") {
    document.getElementById("eye").src = "eyec.png";
  }
}