Question

我有div并隐藏span。我想通过点击按钮来显示它。我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>register page</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/test.js"></script>
  </head>
  <body>
    <form id="register-form">           
        <label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
        <input id="register-username-input" type="text" placeholder="Type username..."/>
        <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
        </form>
    </div>
  </body>
</html>

我的js文件：

function show_element (id) {
    document.getElementById(id).style.visibility = 'visible';
}

当我点击按钮时没有显示。为什么？它显示非常快，而不是再次隐藏。

Chrome开发者工具控制台也不会显示错误。

谢谢。

Answer 1

尝试将return false添加到按钮onClick（）事件中。像这样：

<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>

Answer 2

您需要在第一次调用函数之前定义函数。通常可以通过将函数代码放在嵌套在HTML head内的脚本标记内来实现。

像这样：

<head>
  <script type="text/javascript">
    function show_element (id) {
      document.getElementById(id).style.visibility = 'visible';
    }
  </script>
</head>

Answer 3

很抱歉，但此代码有效：

    <html>

    <head>

    <script>
    function show_element (id) {
        document.getElementById(id).style.visibility = 'visible';
    }
    </script>
    </head>
    <body>
    <div>
    <span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
      <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
    </div>

    </body>
    </html>

修改

我刚读过你的编辑。顺便说一句，我认为你的绝对路径可能会导致问题。

试试这段代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>register page</title> <link rel="stylesheet" href="./static/css/bootstrap.min.css"> <script type="text/javascript" src="./static/js/test.js"></script> </head> <body> <form id="register-form"> <label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label> <input id="register-username-input" type="text" placeholder="Type username..."/> <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button> </form> </div> </body> </html>

显示隐藏的元素

3 个答案: