顯示隱藏元素

-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開發人員工具控制檯也不會顯示錯誤。

謝謝。

來源

2013-03-20 0xAX

檢查元素中的控制檯顯示什麼？有錯誤嗎？ js是否在header中起作用？如果不是，那麼是否包含js文件？在被HTML調用之前函數是否可用？你是否將正確的ID傳遞給函數？ – user1240679 2013-03-20 10:13:28

您的代碼在Chrome中運行：http://jsfiddle.net/cK6Nb/ - 您可以向我們展示JS在HTML文件中的位置嗎？ – 2013-03-20 10:14:52

確保您發送正確的ID來show_element功能 – 2013-03-20 10:14:57

嘗試增加return false到您的按鈕的onClick（）事件。想要這樣：

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

來源

2013-03-20 10:47:42 freshbm

-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-20 10:15:36

更多的評論，而不是答案，你不會說？ – George 2013-03-20 10:16:26

也許是因爲我只是改變了他的部分代碼。我刪除了結束標記，因爲這是一個XML錯誤。順便說一句，我添加HTML標籤只是爲了讓他嘗試該代碼...只是看它是如何工作的... – 2013-03-20 10:18:01

你需要你的第一次調用函數之前定義功能正在取得進展。通常可以通過將函數代碼放置在嵌套在HTML的head內的腳本標記中來實現。

像這樣：

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

來源

2013-03-20 10:16:43 hjpotter92

顯示隱藏元素

回答

相關問題