Cannot set property 'innerhtml' of null

I’m not so good in javascript or something so i still learning but i get a error. and i cant find where the error comes from. because everthing looks good.

Error: cannot set property ‘innerhtml’ of null


$(document).ready(function (){
    window.addEventListener('message', function (event) {
        var data =;

        if (data.action == "ui") {
            if (data.toggle) {

                    qbMultiCharacters.fadeInDown('.characters-list', '20%', 400);
                }, 2000);
            } else {
                document.getElementById("characters").innerHTML = "";

        if (data.action == "setupCharacters") {

        if (data.action == "setinfo") {
            { document.getElementById("characters").innerHTML =; }
        if (data.action == "setCharData") {
            { document.getElementById("name").innerHTML =; }
            { document.getElementById("citizenid").innerHTML =; }



<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="reset.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <link href="" rel="stylesheet">
    <script src=""></script>
    <link rel="stylesheet" href="">
    <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
    <title>barbaroNNs Multicharacter</title>
        <div class="container">
            <div class="main-screen">
                <div class="characters-list">
                    <div id="characters">

                <div class="character-info" style="position: absolute; height: px; width: auto; min-width: 500px; padding: 10px; top: 15%; left: 37%; background-color: rgba(25, 25, 25, 0.92); -webkit-box-shadow: 0px 0px 0px 3px; rgba(0,0,0,0.44); -moz-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.44); box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.44);;border-top: 5px solid rgb(255, 0, 0)">
                    <i class="material-icons" id="close-reg1">close</i>
                    <div class="charinfo" style="position: relative; top: 7%; color: white">
                            <span id="name" style="font-size: 24px; text-align: center">Patrick</span><br>
                            <span id="citizenid" style="font-size: 12px">CID: RLAS182371923</span><br>
                            <div style="margin-top: 15px;">
                            <button onClick="deletechar()" class="w3-button w3-round-large w3-red w3-hover-white">Verwijder</button>
                            <button onClick="logintochar()" class="w3-button w3-round-large w3-green w3-hover-white">Selecteer</button>

                <div class="character-register">
                    <div class="characters-register-block-header">
                        <p>Character Registration [English Only]</p>
                        <i class="material-icons" id="close-reg">close</i>
                    <div class="char-register-inputs">
                        <input type="text" id="first_name" placeholder="First Name" class="char-reg-input">
                        <input type="text" id="last_name" placeholder="Last name" class="char-reg-input">
                        <input type="text" id="nationality" placeholder="Nationality" class="char-reg-input">
                        <input type="date" id="birthdate" placeholder="Date of birth" min="1900-01-01" max="2999-12-31" class="char-reg-input">
                        <select id="gender" name="gender">
                            <option value="man" selected>Man</option>
                            <option value="woman">Woman</option>
                    <div class="character-reg-btn" id="create"><p id="create-text">Confirm data</p></div>

                <div class="character-delete">
                    <div class="characters-delete-block-header">
                        <p>Remove character</p>
                        <i class="material-icons" id="close-del">close</i>

                    <p>Are you sure you want to delete this character?</p>
                    <p id="yeet">All your character data will be deleted and cannot be recovered.</p>

                    <div class="character-acceptdel-btn" id="accept-delete"><p id="accept-text">Remove character</p></div>
                    <div class="character-canceldel-btn" id="cancel-delete"><p id="cancel-text">Back</p></div>
        <script type="text/javascript" src="script.js"></script>
        <script src=""></script>

I mean a good start would be to check which elements are the null ones. That would make it easier to help you.

Also I’ve never seen your document.getElementById lines in extra curly braces like that, like it’s an object with a key but no value. Is that legit? Or is that the cause of your error?