Document.getElementById does not work on Firefox and Edge

Asked

Viewed 332 times

0

**I have a page where I upload all the pages inside one <div content>:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <script>
        var vars = geturlvar()['Nome'];
        $(function () {
            $("#includedContent").load(vars);
        });
    </script>

    <script>
        function CarregaCamposModulo() {
            debugger;
            var id = localStorage.id;
            var nome = localStorage.nome;
            document.getElementById("id_id").value = id;
            document.getElementById("id_nome").value = nome;
        };
    </script>
</head>
<body class="theme-red" onload="CarregaModulos();CarregaCamposModulo()">
    <section class="content">
        <img src="../images/carregando.gif" id="image">
        <div id="includedContent"></div>
    </section>
</body>

</html>

**And the page I carry inside the includedContent by the link http://localhost/i9maker/pages/container_admin.html?Nome=consultas/admin_modulo.html **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Módulos</title>
</head>
<body>
    <div class="container-fluid" style="margin-left: -29px; margin-right: -29px">
        <!--Striped Rows-->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card-panel" style="margin-top: -29px; ">
                    <div class="card" style="background: rgba(245, 245, 245, 0.6)">
                        <div class="body">
                            <form class="form" id="wizard_with_validation" method="POST">
                                <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-12">
                                        <input id="id_id" name="id_id" type="hidden" class="form-control input-style" autofocus required>
                                        <label class="label-margin-top">Descrição*</label>
                                        <input id="id_nome" name="id_nome" type="text" class="form-control input-style input-casesensitive" autofocus required>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

It is working in Google Chrome, but in Firefox and Edge, does not work, error if at the time of:

Document.getElementById("id_id"). value = id;

Document.getElementById("id_name"). value = Description;

Debugging in Edge error appears:

Unable to set Property 'value' of Undefined or null Reference

Image in firefox, works only in debug mode, running without debug mode brings nothing. inserir a descrição da imagem aqui

Google Chrome, this is Google Chrome:

inserir a descrição da imagem aqui

javascript

  • console log.(localStorage.id) gives what result?

  • @Marconi the result is 1

  • I made a Fiddle I could not play the problem at least in Firefox.

  • @Marconi edited the question and added more details of how I am doing, there are some more details that I did not think would not matter, because I’m making a include of this page in another.

2 answers

1

Generally id="" and name="" should be equal, some behaviors (at least in the old ones) caused problems, still yes recommend putting within a window.onload or inside something like DOMContentloaded, for example:

function CarregaCamposModulo() {
    debugger;
    var id = localStorage.id;
    var descricao = localStorage.descricao;
    alert(id);
    alert(descricao);
    document.getElementById("id_id").value = id;
    document.getElementById("id_nome").value = descricao;
}

document.addEventListener("DOMContentLoaded", function () {
    CarregaCamposModulo();
});

Something else that can cause the problem is the behavior of name and id in different browsers, I recommend that the name and the id always be the same, change this:

<input id="id_id" name="id" type="text" class="form-control input-style" autofocus required>

For this reason:

<input id="id_id" name="id_id" type="text" class="form-control input-style" autofocus required>

And adjust in your back-end and other scripts to use id_id.

0


I solved the problem: 1) I placed the registration form in the same place as the consultation form, leaving visible or invisible when necessary. Researching further, I saw several people reporting similar problem with document.getElementById, according to them, despite the function onload load all form data before executing function, w3schools, in certain circumstances he performs before. Well, I don’t know if that’s it, just know that putting on the same page worked blz. How I’m using the same project on CORDOVA, could not opt for a server-side language like PHP or ASPX. I appreciate the availability and time spent by Marconi and Guilherme.

  • is because you just posted in the question the part of admin_modulo.html, had to have posted the container_admin.html

  • @Guilhermenascimento, you’re right, I wavered, but the solution was even better than doing it on different pages, because I didn’t put the rest of the code as you asked. But thanks for the help.

  • That’s the problem, I was going to edit, you’re embedding an HTML inside which should be causing a lot of a side effect

  • @Guilherme, after his tips, I removed all scripts from inside the container_admin.html page and put inside files .js and left on the page admin_modulo.html only the necessary. after that the warning messages have disappeared.

  • Yes, yet the included structure is flawed, of course it is another problem, so I can explain in more detail.

  • @Guilhermenascimento, thank you friend.

Show 1 more comment

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.