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
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; 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">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>
</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">Confirm 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>
<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>
</body>
</html>