none
appendchild RRS feed

  • Pergunta

  • pessoal, bom dia!

    estou tendo um problema com a criação de um menu em javascript.. fazendo alguns testes, eu consegui localizar o local onde o erro ocorre. O problema é que esse erro não ocorre no IE, somente no Chrome e no FireFox.. 

    o erro que acontece é o seguinte:

    cannot call method appendchild of null

    li aqui na net, sobre o script está sendo executado antes do restante do código, alterei a posição do script e ele passou a não encontrar a minha função, em todos os navegadores...

    o erro ocorre na linha em negrito.. nada mais executa depois dela..

             this.draw = function() {
                    if (headerText == null) {
                        headerText = document.createTextNode("Menu");
                        header.appendChild(headerText);
                    }
    
                    menu.appendChild(body);
                    parent.appendChild(menu);
    
                    obj.heightLine();
                    if (st) obj.state();
    
    
                };
    alguém faz ideia do que pode está acontecendo?

    terça-feira, 2 de abril de 2013 13:07

Respostas

  • Bom como você mesmo postou recentimente , veja que na chamada quando você especifica o "mm" veja se a tag que tem esse nome também tem o id igual

    ou seja se for uma tag div veja se está assim <div id="mm" name="mm"> </div> pois se tiver apenas <div name="mm"></div> somente no IE será reconhecido que essa tag possui um nome e id  que servirá para o getElementById , já para outros navegadores não irá reconhecer apenas se tiver id na tag ai sim será feito o reconhecimento. Veja isso deixe o mesmo no nome do name também para o id.


    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    • Marcado como Resposta kngipa terça-feira, 2 de abril de 2013 14:33
    terça-feira, 2 de abril de 2013 14:18
  • aaahhhhhhhhhhhh que lindo!

    o chrome é "casesentive" tbm né!!! :)

    troquei de Menu para menu e ai deu! :)

    obrigada! seu comentário me ajudou a analisar em questão dos ids..


    • Editado kngipa terça-feira, 2 de abril de 2013 14:31
    • Marcado como Resposta kngipa terça-feira, 2 de abril de 2013 14:32
    terça-feira, 2 de abril de 2013 14:28

Todas as Respostas

  • Qual é a origem do menu , pois o menu já aparece dando um appendChild , mas da onde ele vem tem como mostrar o codigo mais completo para identificarmos melhor . 


    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    terça-feira, 2 de abril de 2013 13:56
  • é um pouco grande.. mas tem sim... é a função em negrito que da pau..

    eu tenho esse código e tenho a chamada dele em outra parte do código..não foi eu que fiz, e eu não domino js...

    a linha que marquei no chrome está retornando null

        <script type="text/javascript">
            //<![CDATA[
            jQuery.noConflict();
    
            MenuWin = function(p, id, s) {
    
                var obj = this; // referência ao próprio objeto MenuWin
                var st = (typeof s != 'undefined' && s != null) ? s : false;
                var parent = document.getElementById(p); // objeto que será o container do menu
                var menu = document.createElement("div"); // o menu
                menu.setAttribute("id", id);
                menu.setAttribute((document.all) ? "className" : "class", "menuWin");
    
                var header = document.createElement("span"); // cabeçalho do menu
                header.setAttribute((document.all) ? "className" : "class", "menuWin-header");
                var headerText = null;
    
                var images = new Array(new Image(), new Image());
                images[0].src = "Imagens/nav_up.gif";
                images[1].src = "Imagens/nav_down.gif";
    
                var arrow = document.createElement("img"); // imagem para retrair e extender o menu
                arrow.setAttribute("alt", "");
                arrow.setAttribute("title", "");
                arrow.setAttribute("src", images[0].src);
                arrow.onclick = function() {
                    if (this.getAttribute("src").indexOf("up") > -1) {
                        this.setAttribute("src", images[1].src);
                        jQuery("#" + body.getAttribute("id")).animate({ height: "hide", opacity: "hide" }, "slow");
                    }
                    else {
                        this.setAttribute("src", images[0].src);
                        jQuery("#" + body.getAttribute("id")).animate({ height: "show", opacity: "show" }, "slow");
                    }
                }
    
                var arrowContainer = document.createElement("span"); // container da imagem que retrai e extende o menu
                arrowContainer.setAttribute((document.all) ? "className" : "class", "menuWin-arrow");
                arrowContainer.appendChild(arrow);
    
                menu.appendChild(arrowContainer);
                menu.appendChild(header);
    
                var body = document.createElement("ul"); // corpo do menu
                body.setAttribute("id", "menuWin-body-" + id);
                body.setAttribute((document.all) ? "className" : "class", "menuWin-body");
    
                obj.state = function() {
                    body.style.display = "none";
                    arrow.setAttribute("src", images[1].src);
                };
    
                // função para setar o cabeçalho do menu
                this.setTitle = function(t) {
                    headerText = document.createTextNode(t);
                    header.appendChild(headerText);
                };
    
                // função para setar os itens do menu
                // recebe como parâmetros o texto, o link, o target e a imagem do item
                this.setItens = function(t, a, tg, i) {
                    var li = document.createElement("li");
                    var link = document.createElement("a");
                    var img = document.createElement("img");
                    var imgContainer = document.createElement("div");
    
                    if (i != null) {
                        img.setAttribute("alt", "");
                        img.setAttribute("title", "");
                        img.setAttribute("src", i);
                        imgContainer.appendChild(img);
                    }
    
                    link.appendChild(imgContainer);
    
                    link.setAttribute("href", a);
                    if (tg != null) link.setAttribute("target", tg);
                    link.appendChild(document.createTextNode(t));
    
                    li.appendChild(link);
    
                    body.appendChild(li);
                };
    
                // esta função extende o container da image que retrai e extende o menu,
                // para manter alinhado o texto dos itens do menu.
                this.heightLine = function() {
                    var linhas = body.getElementsByTagName("li");
                    for (i = 0; i < linhas.length; i++) {
                        while (linhas[i].getElementsByTagName("div")[0].offsetHeight < linhas[i].offsetHeight)
                            linhas[i].getElementsByTagName("div")[0].style.height = linhas[i].offsetHeight + "px";
                    }
                };
    
                // função para inserir na tela o menu
                this.draw = function() {
                    if (headerText == null) {
                        headerText = document.createTextNode("Menu");
                        header.appendChild(headerText);
                    }
                    menu.appendChild(body);
                    parent.appendChild(menu);
    
                    obj.heightLine();
                    if (st) obj.state();
                };
    
    
            };
            //]]>
    </script>

    isso está dentro de uma div, o código acima é antes..

    var nTodosSetores = new MenuWin("menu","mm");
    nTodosSetores.setTitle("Ocorrências - Todos os Setores");
    nTodosSetores.setItens("Pesquisar", "consulta_ocorrencias.aspx?StatusOcor=Aberta", null, "Imagens/Ocorrencia.gif");
    nTodosSetores.setItens("Relatórios", "consulta_ocorrencias.aspx", null, "Imagens/Ocorrencia.gif");
    nTodosSetores.draw();
    document.write("<br />");


    • Editado kngipa terça-feira, 2 de abril de 2013 14:14
    terça-feira, 2 de abril de 2013 14:05
  • Bom como você mesmo postou recentimente , veja que na chamada quando você especifica o "mm" veja se a tag que tem esse nome também tem o id igual

    ou seja se for uma tag div veja se está assim <div id="mm" name="mm"> </div> pois se tiver apenas <div name="mm"></div> somente no IE será reconhecido que essa tag possui um nome e id  que servirá para o getElementById , já para outros navegadores não irá reconhecer apenas se tiver id na tag ai sim será feito o reconhecimento. Veja isso deixe o mesmo no nome do name também para o id.


    Davi Murilo Referência Principal : Jesus que ilumina minha mente.
    Referência Profissonal : http://www.tidm.com.br

    • Marcado como Resposta kngipa terça-feira, 2 de abril de 2013 14:33
    terça-feira, 2 de abril de 2013 14:18
  • então Davi.. pelo que estou entendendo desse código, ele cria essa div nessas funções ai.. então acho que não tenho isso quando o código é executado.. eu tenho esse código:

    <div id="Menu"> <script type="text/javascript"> //<![CDATA[ var nTodosSetores = new MenuWin("menu","mm"); nTodosSetores.setTitle("Ocorrências - Todos os Setores"); nTodosSetores.setItens("Pesquisar", "consulta_ocorrencias.aspx?StatusOcor=Aberta", null, "Imagens/Ocorrencia.gif"); // nTodosSetores.setItens("Relatórios", "consulta_ocorrencias.aspx", null, "Imagens/Ocorrencia.gif"); nTodosSetores.draw(); document.write("<br />");

    OUTRAS INSTANCIAS DE MENUWIN.....

    onde me parece que vai montando essas divs.. eu tenho uma div menu, com id=menu.. mas não tem o name..

    terça-feira, 2 de abril de 2013 14:22
  • aaahhhhhhhhhhhh que lindo!

    o chrome é "casesentive" tbm né!!! :)

    troquei de Menu para menu e ai deu! :)

    obrigada! seu comentário me ajudou a analisar em questão dos ids..


    • Editado kngipa terça-feira, 2 de abril de 2013 14:31
    • Marcado como Resposta kngipa terça-feira, 2 de abril de 2013 14:32
    terça-feira, 2 de abril de 2013 14:28