Firebug为一个getElementById返回奇怪的错误

时间:2011-02-09 20:24:29

标签: javascript getelementbyid

我有以下js行

var select_container = "container_"+parts[2];
var get_container = document.getElementById(select_container);

这是其中一部分的功能是失败的,当我查看firebug时,它将get_container返回为undefined。我检查过select_container是正确的值,并且页面上没有重复的id。

这是由onclick事件调用的,所以我看不到等待页面加载是一个问题(无论我等多久,结果都是一样的。)

虔诚的HTML示例:

<div id="container_0">

我很难过!

修改

这是来自父函数的所有Javascript

/*detects links in the form editor and uses them to adjust the layout*/
window.onload = function () {
    clickDetection();
} /*detect clicks on interesting links*/

function clickDetection() {
    var canvas = document.getElementById("content");
    var dumbLinks = canvas.getElementsByTagName("a");
    for (var i = 0; i < dumbLinks.length; i++) {
        dumbLinks[i].onclick = function () {
            clickRoute(this);
            return false
        };
    }
} /*reroute click behaviour to correct function*/

function clickRoute(link_object) {
    var linkId = link_object.getAttribute("id");
    var linkParts = linkId.split("_");
    if (linkParts[1] == "delete") {
        delete_route(linkParts);
    } else if (linkParts[1] == "new") {
        new_route(linkParts);
    }
}
function delete_route(parts) {
    alert(parts);
    if (parts[0] == "field") {
        var select_container = "container_" + parts[2];
        var get_container = document.getElementById(select_container);
        document.removeChild(get_container);
    } else if (parts[0] == "option") {
        alert("delete a option");
    }
}

完整(典型)html(请注意重复部分的长度已被剪切,其他细节因安全性而改变):

<!DOCTYPE HTML>
<html>
<head>

<!-- determines header content -->

<meta charset="utf-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />

<script type="text/javascript" src="some.js"></script>
<title>Title of the document</title>
</head>

<body>

<div class="bignavblock"><p><a href="removed">nav link</a></p></div>

<div class="bignavblock"><p><a href="removed">nav linke</a></p></div>

<div class="bignavblock"><p><a href="removed">nav link</a></p></div>

<div class="bignavblock"><p><a href="removed">nav link</a></p></div>

<div class="bignavblock"><p><a href="removed">nav link</a></p></div>

<div class="bignavblock"><p><a href="removed">nav link</a></p></div>

<div id="content">

<h1>screen name</h1>

<form method="post" action="#this">
<label for="summary">Select an item to edit:<br></label>
<select name="summary" id="summary">

<option value="generic">generic</option>
<option value="updated">updated</option>

</select>

<input type="submit" name="summary_select" value="Select">

</form>


<h2>screen name</h2>

<div id="container_7">
<form method="post" action="#this">
<fieldset><legend>existing segment</legend>

<p><a id="field_delete_7" href="#">Delete field</a></p>

<label for="name_7">Field Name</label><input type=text id="name_7" name="name" value="Colour"><br>

    <label for="type_7">Data type expected</label>   
     <select name="type" id="type_7">  

     <option value="name" >Name</option>
    <option value="email" >Email Address</option>
    <!-- cut for length -->


    </select>
    <p>Some text</p>

    <label for="option_7_0">Option Value</label><input type=text id="option_7_0" name="option_7_0" value="Red">
        <a id="option_delete_7_0" href="#">Delete option</a><br>

        <label for="option_7_1">Option Value</label><input type=text id="option_7_1" name="option_7_1" value="Green">
        <a id="option_delete_7_1" href="#">Delete option</a><br>

        <label for="option_7_2">Option Value</label><input type=text id="option_7_2" name="option_7_2" value="Blue">
        <a id="option_delete_7_2" href="#">Delete option</a><br>

        <a id="option_new_7" href="#">Add new option</a>

        <input type="submit" name="detail" value="Finish"></fieldset></form></div>

        <p><a id="field_new" href="#">Add new field</a></p>


</div>

<!-- determines footer content -->

footer content
</body>
</html>

1 个答案:

答案 0 :(得分:3)

改变这个:

document.removeChild(get_container);

到此:

get_container.parentNode.removeChild(get_container);

或者如果容器是body的直接后代,那么你可以这样做:

document.body.removeChild(get_container);