Firebug возвращает странную ошибку для одного getElementById - PullRequest
Новая
       1

Firebug возвращает странную ошибку для одного getElementById

1 голос
/ 09 февраля 2011

У меня есть следующие строки JS 

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

Функция, частью которой она является, не работает, и когда я смотрю в firebug, она возвращает get_container как неопределенное. Я проверил, что select_container - правильное значение и что на странице нет повторяющегося идентификатора.

Это вызывается событием 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 Ответ

3 голосов
/ 10 февраля 2011

Изменить это: 

document.removeChild(get_container);

к этому: 

get_container.parentNode.removeChild(get_container);

или если контейнеры являются прямыми потомками body, то вы можете сделать это: 

document.body.removeChild(get_container);
...