document.getElementById does not work on Firefox and Edge [closed]

Question

document.getElementById does not work on Firefox and Edge [closed]

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

** I have 1 page where I load all pages within a <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 that I load within includedContent through 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 works in Google Chrome, but in Firefox and Edge, it does not work, the error occurs at the time of:

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

document.getElementById ("id_name"). value = description;

Debugging on Edge appears error:

Unable to set property 'value' of undefined or null reference

Image in firefox, it works only in debug mode, if I run without debug mode it does not bring anything.

GoogleChrome,thisisinGoogleChrome:

javascript

asked by anonymous 05.07.2017 / 15:48

2 answers

1

Generally id="" and name="" should be equal, some behaviors (at least in the old IEs) caused problems, I still recommend placing within a window.onload or within something like DOMContentloaded , for example: / p>

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();
});

Another thing that can cause the problem is the behavior of name and id in different browsers, I recommend that name and 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 on your backend and other scripts to use id_id .

05.07.2017 / 15:52

Create an application shortcut in an onLogClickListener? Load extra data by the id received by the array

score 0 · Accepted Answer

I solved the problem: 1) I placed the registration form in the same place as the consultation form, leaving it visible or invisible when I need it. Searching deeper, I saw several people reporting similar problems with document.getElementById , according to them, although the onload function loads all form data before running the function, w3schools , under certain circumstances it runs before. Well, I do not know if that's it, just know that putting it on the same page worked blz. Since I'm using the same project in CORDOVA , I could not opt for a server-side language like PHP or ASPX. Thank you for the availability and time spent by Marconi and Guilherme.