Hello freeCodeCamp!
I am working on a project and my problem is a little hard to describe so I will first say my Error is:
adminpanel.js:6 Uncaught TypeError: Cannot read property >‘addEventListener’ of null
at statusFunc (adminpanel.js:6)
at HTMLButtonElement.onclick (index.html:1)
I am assuming is has to do with the fact that the event listener is trying to access a class that is made in my js file.
const li = `
<li>
<div class="collapsible-header row col s6">${app.email} <span class="col s4 center status-box">Status: ${app.status}</span></div>
<div class="collapsible-body">
<ul>
<li>Name: ${app.fname} ${app.lname} | Discord: ${app.discord} | In-game Name: ${app.gamename} | Age: ${app.age} | Department: ${app.dept}</li>
<li><button class="btn-small applstatus" onClick="statusFunc()">Accept</button><button class="btn-small red">Delete/Reject</a></li>
</ul>
</div>
</li>
`;
I haven’t done this before so I am sure I am doing it wrong. this is the code for the statusFunc().
const appStatus = document.querySelector('.applstatus');
function statusFunc() {
appStatus.addEventListener('click', (e) => {
e.preventDefault();
//db.collection('applications').where(doc.id).get()
//.then(function(querySnapshot) {
db.collection('applications').doc(doc.id).update({
status: 'Accepted'
}).then(() => {
console.log(doc.data());
});
//})
});
}
Is there any tutorials out there that touch on this? Thanks!
If you are adding the li dynamically you can’t query the element before it is in the DOM.
You can also wrap code in an event listener that looks for the DOM state (like DOMContentLoaded).
We may have to see more of your code to help. If you have a GitHub you can post the code or make a live version on something like Codepen or whatnot.
Github is being a you know what and wont let me login I will add more code here.
index.js file
//SETUP ADMIN APPLICATION DISPLAY
const apps = document.querySelector('.applications');
const setupApps = (data) => {
let html = '';
data.forEach(doc => {
const app = doc.data();
const li = `
<li>
<div class="collapsible-header row col s6">${app.email} <span class="col s4 center status-box">Status: ${app.status}</span></div>
<div class="collapsible-body">
<ul>
<li>Name: ${app.fname} ${app.lname} | Discord: ${app.discord} | In-game Name: ${app.gamename} | Age: ${app.age} | Department: ${app.dept}</li>
<li><button class="btn-small applstatus" onClick="statusFunc()">Accept</button><button class="btn-small red">Delete/Reject</a></li>
</ul>
</div>
</li>
`;
html += li
});
apps.innerHTML = html;
}
adminpanel.js
// SETUP APPLICATION STATUS ACCEPTANCE
function statusFunc() {
window.addEventListener("DOMContentLoaded", (e) => {
const appStatus = document.querySelector('.applstatus');
appStatus.addEventListener('click', (e) => {
e.preventDefault();
db.collection('applications').doc(doc.id).update({
status: 'Accepted'
});
});
});
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Site</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav>
<div class="nav-wrapper blue darken-3">
<a href="#" class="brand-logo center">Corrugated RP Application</a>
<ul id="nav-mobile" class="right">
<li class="logged-out"><a href="#modal-login" class="btn red darken-4 modal-trigger">Login</a></li>
<li class="logged-in"><a href="#modal-admin" class="btn red darken-4 modal-trigger">Admin</a></li>
<li class="logged-in"><a href="" id="logout"class="btn red darken-4">Logout</a>
</li>
</ul>
</div>
</nav>
<div id="modal-login" class="modal">
<div class="modal-content">
<div class="row">
<h3 class="red-text text-darken-4">Admin Login</h3>
</div>
<div class="row">
<form action="" id="login-form">
<div class="input-field col s6">
<input placeholder="email@placeholder.com" name="admin-email" type="email" class="validate">
<label for="admin-email" class="red-text text-darken-4">Email</label>
</div>
<div class="input-field col s6">
<input placeholder="Placeholder" name="admin-pass" type="password" class="validate">
<label for="admin-pass" class="red-text text-darken-4">Password</label>
</div>
<div class="row">
<button class="btn wave-effect right red darken-4">Login <i class="material-icons right">send</i></button>
</div>
</form>
</div>
</div>
</div>
<div id="modal-admin" class="modal">
<div class="row">
<h3 class="blue-text text-darken-3">Admin Panel</h3>
</div>
<ul class="collapsible applications">
</ul>
</div>
<div class="container bor brown lighten-5">
<div class="row">
<div class="col s12">
<h3 class="blue-text text-darken-3">Welcome</h3>
<p class="blue-text text-darken-3">Please fill out the complete form. Thank you!</p>
</div>
<form id="form-app" class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="John" name="first_name" type="text" class="validate">
<label for="first_name" class="blue-text text-darken-3">First Name</label>
</div>
<div class="input-field col s6">
<input placeholder="Smith" name="last_name" type="text" class="validate">
<label for="last_name" class="blue-text text-darken-3">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="email@placeholder.com" name="email" type="email" class="validate">
<label for="email" class="blue-text text-darken-3">Email</label>
</div>
<div class="input-field col s6">
<input placeholder="Placeholder" name="age" type="text" class="validate">
<label for="age" class="blue-text text-darken-3">Age</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder#1234" name="discord_name" type="text" class="validate">
<label for="discord_name" class="blue-text text-darken-3">Discord Name</label>
</div>
<div class="input-field col s6">
<input placeholder="Steve Rogers" name="game_name" type="text" class="validate">
<label for="game_name" class="blue-text text-darken-3">In-Game Name</label>
</div>
</div>
<div class="input-field col s12">
<select name="dept">
<option disabled selected>Choose your option</option>
<option value="State Trooper">State Trooper</option>
<option value="Sheriff">Sheriff</option>
<option value="Park Ranger">Park Ranger</option>
<option value="Fire/EMS">Fire/EMS</option>
<option value="Civilian">Civilian</option>
</select>
<label for="dept" class="blue-text text-darken-3">Which Department would you like to join?</label>
</div>
<div class="row">
<button class="btn wave-effect right light-blue">Submit <i class="material-icons right">send</i></button>
</div>
</form>
</div>
</div>
<footer class="page-footer blue darken-4">
<div class="container">
</div>
<div class="footer-copyright">
<div class="container center">
© 2020 Copyright Corrugated Role Play
</div>
</div>
</footer>
</body>
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-auth.js"></script>
<script>
$('select').formSelect();
$('.modal').modal();
$('.collapsible').collapsible();
$('.fixed-action-btn').floatingActionButton();
</script>
<script src="js/auth.js"></script>
<script src="js/index.js"></script>
<script src="js/adminpanel.js"></script>
</html>
This is all the code that pertains top the “button” that I am trying to control. I got the error to go away but I am not sure the click event is working. I may just have some database stuff to work out. Thanks for all the help!!
Well, only you know if the event listener is working. If you put a console log inside it does it run?
You can check the event listeners on the element
It’s hard to help because I do not know when the code runs. Seeing the definition for code is only half the picture. Seeing when it runs is the other half.