'Creating a new multicharacter script. But get the error cannot set property 'innerhtml' of null
I'm making a new character selector for the game fivem. But now i get a error. When i try to make a new character he shows up the forum where i can fill out the things. But when i click on confirm data it gives me a black screen. And then the follow error:
cannot set property 'innerhtml' of null
Script js:
$(document).ready(function (){
window.addEventListener('message', function (event) {
var data = event.data;
if (data.action == "ui") {
if (data.toggle) {
$('.container').show();
qbMultiCharacters.resetAll();
$.post('http://bb-multicharacter/setupCharacters');
setTimeout(function(){
qbMultiCharacters.fadeInDown('.characters-list', '20%', 400);
$.post('http://bb-multicharacter/removeBlur');
}, 2000);
} else {
$('.container').fadeOut(250);
document.getElementById("characters").innerHTML = "";
$('.character-info').fadeOut(750);
$('.characters').fadeOut(750);
qbMultiCharacters.resetAll();
}
}
if (data.action == "setupCharacters") {
setupCharacters(event.data.characters)
}
if (data.action == "setinfo") {
{ document.getElementById("characters").innerHTML = event.data.data; }
}
if (data.action == "setCharData") {
{ document.getElementById("name").innerHTML = event.data.name; }
{ document.getElementById("citizenid").innerHTML = event.data.cid; }
}
});
$('.datepicker').datepicker();
});Html:
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
<title>barbaroNNs Multicharacter</title>
</head>
<body>
<div class="container">
<div class="main-screen">
<div class="characters-list">
<div id="characters">
</div>
</div>
<!--
<div class="character-info" style="position: absolute; left: 40%; top: 20%; background-color: rgba(20, 20, 20,0.8); font-family: Heebo; color: white; border-radius: 5px; padding-left: 30px; padding-right: 30px; height: 80px;width: 300px">
<i class="material-icons" id="close-reg1">close</i>
<span id="name" style="position: relative; font-size: 36px; top: 20%"></span>
<br />
<span id="citizenid" style="font-size: 12px; position: relative; top: 10%"></span>
<div class="bottons" style="position: absolute; right: 20px; height: 100%; top: 35%;">
<span class="loginBtn" onClick="logintochar()" style="background-color: #44bd32; border-radius: 5px; display:inline-block;padding-left: 15px; padding-right: 15px; padding-top: 5px; padding-bottom: 5px;">Play</span>
<span class="deleteBtn" onClick="deletechar()" style="background-color: #c02b2b; border-radius: 5px; display:inline-block;padding-left: 15px; padding-right: 15px; padding-top: 5px;; padding-bottom: 5px;">Delete</span>
</div>
</div>-->
<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">
<center>
<span id="name" style="font-size: 24px; text-align: center">Shimon Abuhatzera</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">Delete</button>
<button onClick="logintochar()" class="w3-button w3-round-large w3-green w3-hover-white">Select</button>
</div>
</center>
</div>
</div>
<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>
<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>
</select>
</div>
<div class="character-reg-btn" id="create"><p id="create-text">Confirfffggm data</p></div>
</div>
<div class="character-delete">
<div class="characters-delete-block-header">
<p>Remove character</p>
<i class="material-icons" id="close-del">close</i>
</div>
<p>Are you sure you want to delete this character?</p>
<br>
<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>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|