Check out this code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Cool App</title>
</head>
<body>
<p id='nameDisplay'> Name Display Area </p>
<button id="showBtn" type="button">Show Names</button></br>
<button id="likeBtn" type="button">Like</button>
<button id="dislikeBtn" type="button">Dislike</button>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script>
$(document).ready(function(){
var names = ['John', 'Emily', 'Alex', 'Grace', 'Liam'];
var likedNames = [];
var dislikedNames = [];
function displayNextName (){
var currentName = names[0];
if (!currentName){
currentName = 'No more names to show';
}
document.getElementById('nameDisplay').innerHTML = currentName;
}
function likeAction(){
likedNames.push(names[0]);
names.splice(0, 1);
displayNextName();
}
function dislikeAction(){
dislikedNames.push(names[0]);
names.splice(0, 1);
displayNextName();
}
displayNextName();
document.getElementById('likeBtn').onclick = likeAction;
document.getElementById('dislikeBtn').onclick = dislikeAction;
});
</script>
</html>
The error message currently displayed is:
uncaught TypeError: Cannot set property 'onclick' of nullI did some research on this error and it seems to be related to the DOM, possibly indicating that elements have not been fully loaded onto the page yet?
The desired functionality is for different names to appear each time the user clicks the like or dislike button until all names have been displayed.