CODEWITHSUNDEEP
javascriptjqueryhtml
stubbsies12345
stubbsies12345

Reputation: 17

Error when trying to get data from javascript and then showing it in HTML

Hi i am getting a data from url and then storing it into variables to then show the data in html using document.getElementById().innerHTML but some reason i keep getting this error

"[Error] TypeError: null is not an object (evaluating 'document.getElementById("firstname").innerHTML = fname') global code"

Thanks

<script type="text/javascript">
    var fname = ""
    var lname = ""
    var user = ""
    var pass = ""
    var email = ""
    var con = ""
    var group = ""
    var uri_dec = ""
    var uri_dec1 = ""
    $.urlParam = function(name){
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if (results==null){
           return null;
        }
        else{
           return results[1] || 0;
        }
    }

    fname = $.urlParam('fname');
    lname = $.urlParam('lname');
    user = $.urlParam('user');
    email = $.urlParam('email');
    con = $.urlParam('con');
    group = $.urlParam('group');
    uri_dec = decodeURIComponent(con);
    uri_dec1 = decodeURIComponent(group);
    console.log($.urlParam('fname'));
    console.log($.urlParam('lname'));
    console.log($.urlParam('user'));
    console.log($.urlParam('email'));
    console.log($.urlParam('con'));
    console.log($.urlParam('group'));

    document.getElementById("firstname").innerHTML = fname
    document.getElementById("lastname").innerHTML = lname;
    document.getElementById("username").innerHTML = user
    document.getElementById("email").innerHTML = email
    document.getElementById("country").innerHTML = uri_dec
    document.getElementById("group").innerHTML = uri_dec1

    </script>
    <p align="center" id="firstname"></p>
    <p align="center" id="lastname" class="lastname"></p>
    <p align="center" id="username" class="username"></p>
    <p align="center" id="email" class="email"></p>
    <p align="center" id="country" class="contry"></p>
    <p align="center" id="group" class="group"></p>

Upvotes: 0

Views: 80

Answers (2)

Deftwun
Deftwun

Reputation: 1232

As @SciFiThief mentioned, your script is being executed before the html has loaded. You need to either include your script before your html tags or a use a 'document ready' function to execute the script once the html is loaded.

//Using Jquery
$(document).ready(function(){
    //your script here
});

//Using vanilla Javascript
document.addEventListener("DOMContentLoaded", function(event) { 
    //your script here
});

Upvotes: 0

Lucas Souza
Lucas Souza

Reputation: 371

Try changing innerHTMLby innerText.

Upvotes: 1

Related Questions