尝试从 javascript 获取数据然后在 HTML 中显示时出错答案

【问题标题】：Error when trying to get data from javascript and then showing it in HTML尝试从 javascript 获取数据然后在 HTML 中显示时出错
【发布时间】：2015-09-04 00:50:25
【问题描述】：

您好，我从 url 获取数据，然后将其存储到变量中，然后使用 document.getElementById().innerHTML 在 html 中显示数据，但出于某种原因，我不断收到此错误

"[Error] TypeError: null is not an object (evalating 'document.getElementById("firstname").innerHTML = fname') 全局代码”

谢谢

<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>

【问题讨论】：

您的脚本在 html 被渲染之前执行，尝试将 html（您的段落）放在之前

标签： javascript jquery html

【解决方案1】：

尝试将innerHTML更改为innerText。

【讨论】：

然后将该脚本标签放入 head 标签中，在您的 body 标签之前。

【解决方案2】：

正如@SciFiThief 提到的，您的脚本在加载 html 之前正在执行。您需要在 html 标记之前包含脚本，或者在加载 html 后使用“文档就绪”功能来执行脚本。

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

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

【讨论】：