-3

我有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 开发者工具控制台也不会显示错误。

谢谢你。

4

3 回答 3

2

尝试添加return false到您的按钮 onClick() 事件。像这样：

<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>
于 2013-03-20T10:47:42.443 回答
1

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

像这样：

<head>
  <script type="text/javascript">
    function show_element (id) {
      document.getElementById(id).style.visibility = 'visible';
    }
  </script>
</head>
于 2013-03-20T10:16:43.977 回答
-1

抱歉，这段代码有效：

    <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>
于 2013-03-20T10:15:36.960 回答