JavaScript錯誤未定義的對象，儘管對象存在

我有以下代碼JavaScript錯誤未定義的對象，儘管對象存在

<!DOCTYPE HTML> 
<html> 
    <head> 
    </head> 
    <body> 
     <div class="full-details-box" name="full_details_box" id="full-details-box"></div> 
     <hr /> 
     <script type='text/javascript'> 
     function show_3136(){ 
      document.full_details_box.style.display='block'; 
     } 
     show_3136(); 
     </script> 
    </body> 
</html>

我得到的錯誤：window.document.full_details_box未定義

我得到的錯誤行：

document.full_details_box.style.display='block';

但是我確實有一個名爲full_details_box的<div>元素，爲什麼這個錯誤？

來源

2012-01-25 Oren Tal

請勿使用div的name屬性。它甚至不存在。使用id和：

document.getElementById('full-details-box')...

來源

2012-01-25 16:58:28

function show_3136(){ 
    document.getElementById('full_details_box').style.display='block'; 
}

來源

2012-01-25 16:58:32

要訪問這個元素，用getElementById

function show_3136() { 
    document.getElementById("full-details-box").style.display = "block"; 
}

來源

2012-01-25 16:59:04

你可以做一個

document.getElementById("full-details-box").style.display='block';

來源

2012-01-25 16:59:24 Johann

只需添加到您的困惑 - 你可能一直在考慮表單域所有這些都可以在表單字段上工作（僅當您將表單域中的字段包裝在表單標籤中）

<html> 
<head> 
    <script type='text/javascript'> 
    function showFormField(){ 
     document.forms[0].full_details_boxName.style.display='block'; 
     // or document.forms[0].elements["full_details_boxName"].style.display='block'; 
    } 
    function showNamedField(){ 
     document.getElementsByName("full_details_boxName")[0].style.display='block'; 
    } 
    function showFieldById(){ 
     document.getElementsById("full_details_boxID").style.display='block'; 
    } 
    function showFieldByClassName(){ // does not work in all IE browsers 
     document.getElementsByClassName("full_details_boxCLASS")[0].style.display='block'; 
    } 
    </script> 
</head> 
<body> 
<form> 
    <input class="full-details-boxCLASS" name="full_details_boxName" id="full-details-boxID"/> 
</form> 
</body> 
</html>

將要使用ID或類，但不能命名

來源

2012-01-25 17:13:30 mplungjan

HTML一個DIV：

<div id="full-details-box"> 
    Just some test content 
</div> 
<hr />

CSS：

div#full-details-box { 
    display:none; 
}

JS：

function show_3136(){ 
    document.getElementById("full-details-box").style.display = "block"; 
} 
show_3136();

對於一個工作示例，see jsFiddle

來源

2012-01-25 17:14:16

回答

相關問題