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

标签 javascript getelementbyid

我有以下几行js

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

这是其中一部分的函数失败,当我查看 firebug 时,它返回未定义的 get_container。我已经检查过 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>

最佳答案

改变这个:

document.removeChild(get_container);

为此:

get_container.parentNode.removeChild(get_container);

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

document.body.removeChild(get_container);

关于javascript - Firebug 为一个 getElementById 返回奇怪的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4950036/

相关文章:

javascript - 按id选择并获取javascript上的属性名称

javascript - 如何匹配具有固定标题的滚动表中的列

javascript - 多个警报 JavaScript

javascript - 动态径向进度条

javascript - 根据位置计算链接并分配为变量?查询

javascript - 使用 javascript 在特定的 div 中创建 <li> 数组

javascript - 获取嵌套在 JavaScript 中的 Frame 内的 iframe 内的元素值?

javascript - 使用 javascript 按钮更改 html,并使用自动递增数字选取多个值

Javascript - 字符串.split后未定义的数组值

javascript - 在 javascript 中渲染 html.erb 模板