Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Chris Carr
Front End Web Development Techdegree Student 12,900 PointsCannot set property 'innerHTML' of null
When I move <div id="modalWrapper"> inside of <div id="wrapper"> I get the error of TypeError: Cannot set property 'innerHTML' of null but no error when modalWrapper is outside of wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
<title>API Example</title>
</head>
<body>
<h1>awesome startup employee directory</h1>
<div class="modal" id="wrapper">
<!--template literals worker list goes here-->
<div id="modalWrapper">
<!--template literal worker modal goes here-->
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', loadWorkers);
let myWorker = '';
let myJSON = '';
let myWorkerCard = '';
let myWorkerLength = 0;
let workerCardID = '';
let selectedWorkers;
let workerModal = '';
function loadWorkers() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myJSON = this.responseText;
myWorker = JSON.parse(myJSON);
for (i = 0; i < Object.keys(myWorker.results).length; i++) {
myWorkerCard += `
<div class="container" id="container${[i]}">
<img class="employee-image" src="${myWorker.results[i].picture.large}" alt="Employee Image">
<div class="employee-details">
<p class="first-name">${myWorker.results[i].name.first}</p>
<p class="last-name">${myWorker.results[i].name.last}</p>
<p class="worker-email">${myWorker.results[i].email}</p>
<p class="worker-city">${myWorker.results[i].location.city}</p>
</div>
</div>
`
}
document.getElementById('wrapper').innerHTML = myWorkerCard;
console.log(myWorkerCard);
console.log(myWorker);
//Modal Functionality
//select all employee cards
selectedWorkers = document.getElementsByClassName('container');
//add click event listner to each employee card
for(i = 0; i < selectedWorkers.length; i++) {
selectedWorkers[i].addEventListener('click', openModal(i));
}
function openModal(i) {
return function () {
workerModal = `
<div class="modal-container" id="container${[i]}">
<span class="close-modal" id="closeModal">×</span>
<img class="employee-image" src="${myWorker.results[i].picture.large}" alt="Employee Image">
<div class="employee-details">
<p class="first-name">${myWorker.results[i].name.first}</p>
<p class="last-name">${myWorker.results[i].name.last}</p>
<p class="worker-email">${myWorker.results[i].email}</p>
<p class="worker-city">${myWorker.results[i].location.city}</p>
</div>
<div class="employee-contact">
<p class="phone-number">${myWorker.results[i].cell}</p>
<p class="address">${myWorker.results[i].location.street}</p>
<p class="address">${myWorker.results[i].location.state}</p>
<p class="birthdate">Birthday: ${myWorker.results[i].dob}</p>
</div>
`
document.getElementById('modalWrapper').innerHTML = workerModal;
document.getElementById('closeModal').addEventListener('click', (closeModal));
function closeModal() {
console.log('close clicked');
}
};
}
}
};
xhr.open('GET', 'https://randomuser.me/api/?results=12&inc=name,email,location, picture,username,cell,dob,login', true);
xhr.send();
}
1 Answer
Tray Denney
Courses Plus Student 12,884 Pointsdocument.getElementById('wrapper').innerHTML = myWorkerCard;
This line of code may be overwriting your modalWrapper div.