Question

我有一个简单的代码来隐藏 div 内的对象，直到按下按钮。
代码有效，但执行警报后，代码回滚。
我知道有几种选择可以做同样的事情，但我尝试过的其他人也会出现同样的行为（例如 https://www.w3schools.com/jsref/prop_style_visibility.asp）。
所以我尝试了 removeAttribute 样式，因为它更容易在控制台上观看。
我试图将脚本放在表单之前和表单之后，但发生了相同的行为。
为了演示，我从控制台添加了一些快照，请参见下文。
我不确定我做错了什么。在 Chrome (89.0.4389.114) 和 Edge (89.0.774.75) 上测试。

非常感谢任何帮助！
先谢谢你。

附注。由于它具有条件值，它在 php 代码中运行（使用 echo）。
**附注。它在表单之外工作正常**

<body>
    <form ...
        (...)
        <div class="field" id="pwdDIV" style="visibility: hidden">
        ..somocode..
        </div>
        <button class="button" onclick="showPwd()">Show Password</button>
    </form>

<script>
function showPwd() {
    var z = document.getElementById('pwdDIV');
    alert("Get Style: "+z.style.visibility);
    if (z.style.visibility === 'hidden') {
        z.removeAttribute("style");
        alert("Change to Style: "+"visible");
    } else {
        (...)
    }
}
</script>
</body>

在按下显示密码按钮之前 Before Press Show Password button

按下显示密码按钮后 - 执行警报参数 After press Show Password button - executing alert parameter

执行Javascript代码后 After execute Javascript code

外部表单示例（外部表单工作正常）

<html>

<head>
  <script type="text/javascript">
    function showPwd() {
      var z = document.getElementById('pwdDIV');
      if (z.style.visibility === 'hidden') {
        z.removeAttribute("style");
      } else {
        z.setAttribute("style", "visibility: hidden");
      }
    }
  </script>
</head>

<body>
  <button onclick="showPwd()">Show Password</button>
  <div id="pwdDIV" style="visibility: hidden">
    <input type="password" id="pwd1" name="pwd1">
  </div>
</body>

</html>

Javascript removeAttribute 样式无法正常工作

0 个答案: