JavaScript function 由可点击触发<div>用于更改图像源的标记<img>标签没有执行</div><div id="text_translate"><p> JavaScript function 改图片源无效。</p><p> 这是我的代码： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> 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"; } }</pre><pre class="snippet-code-html lang-html prettyprint-override"> <,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 class="menu_btn" onclick="start()"> <img class="menu" src="menu.png" alt="menu" id="icon-menu"> </button> <img class="logo" src="logo.png" alt="logo" /> <header/> <form action="login-ctrl:php" method="post"> <div class="log-form"> <label for="email">Email.<br><input type="email" class="email" placeholder="input email...:" name="email"/></label><br> <label class="label" for="password">Password.<br><input type="password" id="password" class="password" placeholder="input password...." name="password"/><div onclick="eye()" class="eye-btn"><img src="eye.png" id="eye"></div></label> <button class="log-but" type="submit" name="submit">login</button> </div> </form> </body> <script src="index.js"></script> <script src="login.js"></script> </html></pre></div></div><p></p><p> 我已经尝试在不同的脚本中编写函数，但它仍然不起作用，它应该在第一次单击时将图像源更改为另一个，然后在再次单击时返回。</p></div>

Question

JavaScript function 改图片源无效。

这是我的代码：

 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 class="menu_btn" onclick="start()"> <img class="menu" src="menu.png" alt="menu" id="icon-menu"> </button> <img class="logo" src="logo.png" alt="logo" /> <header/> <form action="login-ctrl:php" method="post"> <div class="log-form"> <label for="email">Email.<br><input type="email" class="email" placeholder="input email...:" name="email"/></label><br> <label class="label" for="password">Password.<br><input type="password" id="password" class="password" placeholder="input password...." name="password"/><div onclick="eye()" class="eye-btn"><img src="eye.png" id="eye"></div></label> <button class="log-but" type="submit" name="submit">login</button> </div> </form> </body> <script src="index.js"></script> <script src="login.js"></script> </html>

我已经尝试在不同的脚本中编写函数，但它仍然不起作用，它应该在第一次单击时将图像源更改为另一个，然后在再次单击时返回。

Answer 1

这是一个简化版本，不需要所有额外的 javascript，只需要几行 javascript 和一些 CSS。

对于这个答案，我使用 javascript 来检测点击并更改类型。

从那里开始，在 CSS 中，我根据密码类型更改按钮的背景。 我更改了 HTML 以便 div 是一个按钮，它没有内联 onclick 也没有 img 标签。

在 CSS 中，您可以轻松地为按钮提供不同的宽度/高度并将背景更改为图像。

 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" class="password" placeholder="input password...." value="Text to see type change" name="password"/><button type="button" class="eye-btn"></button>

Answer 2

当您读取参数document.getElementById("eye").src时，它会返回完整的文件路径，例如file:///C:/Users/john/Documents/eye.png 。 您可以将其替换为getAttribute('src')方法：

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";
  }
}

Answer 3

下面的代码片段应该做你想做的。 即使我们没有使用 jQuery，我们也应该接受它的基本思想：“少写，多做。”：这意味着：避免将id用作 CSS 选择器，而是使用 class 名称。 这样我们就可以在许多情况下应用单个 function。

我还更改了您的点击事件处理程序 function eye() （现在称为showHide ）的事件附件 - 以及 function 本身 - 在更多方面，请在下面查看：

 function showHide(ev) { const img=ev.target, pw=img.closest(".eye-btn").previousElementSibling, hidden=pw.type==="password"; pw.type=hidden?"text":"password"; img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/"+(hidden?"c/cf/OOjs_UI_icon_eye.svg/20px-OOjs_UI_icon_eye.svg.png":"7/79/OOjs_UI_icon_eyeClosed.svg/20px-OOjs_UI_icon_eyeClosed.svg.png"); } document.querySelectorAll(".eye-btn img").forEach(img=>img.addEventListener("click",showHide));

 <,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 class="menu_btn" onclick="start()"> <img class="menu" src="menu.png" alt="menu" id="icon-menu"> </button> <img class="logo" src="logo.png" alt="logo" /> <header/> <form action="login-ctrl:php" method="post"> <div class="log-form"> <label for="email">Email.<br><input type="email" class="email" placeholder="input email...:" name="email"/></label><br> <label class="label" for="password">Password.<br><input type="password" id="password" class="password" placeholder="input password...:" name="password"/><div class="eye-btn"><img src="https.//upload.wikimedia.org/wikipedia/commons/thumb/7/79/OOjs_UI_icon_eyeClosed.svg/20px-OOjs_UI_icon_eyeClosed.svg.png"></div></label> <button class="log-but" type="submit" name="submit">login</button> </div> </form> </body> <script src="index.js"></script> <script src="login.js"></script> </html>

从单击图像img到密码输入字段pw的“相对 DOM 导航”可能值得注意： pw=img.closest(".eye-btn").previousElementSibling 。 首先，我向上移动到最接近的父元素 class“eye-btn”。 从那里我返回到前一个元素兄弟（这将跳过元素之间的任何换行符、空格或其他文本节点）。