so I'm new to frontend and JavaScript, coming from Rails but I'm working on a project for class and I'm having some trouble. Its a spotify clone, so far at this moment we're using just plain old JS. And I've been following along as such.
We're adding a play button so when you hover over a table row a play button appears where the track number exists and when your mouse leaves the row, the play button disappears but the track number does not reappear.
This is the main issue so far.
The next issue is when I run the console along side the browser window and hover over a row, I get the following error:
Uncaught TypeError: Cannot set property 'innerHTML' of null
Below the //The problem is occurring here comment is where I think the issue is occuring but I've included the rest of the file just incase you need to see.
album.js
//Example Album
var albumPicasso = {
name: 'The Colors',
artist: 'Pablo Picasso',
label: 'Cubism',
year: '1881',
albumArtUrl: '/assets/images/album_covers/01.png',
songs: [
{ name: 'Blue', length: '4:26' },
{ name: 'Green', length: '3:14' },
{ name: 'Red', length: '5:01' },
{ name: 'Pink', length: '3:21' },
{ name: 'Magenta', length: '2:15' }
]
};
//Another Example Album
var albumMarconi = {
name: 'The Telephone',
artist: 'Guglielmo Marconi',
label: 'EM',
year: '1909',
albumArtUrl: '/assets/images/album_covers/20.png',
songs: [
{ name: 'Hello, Operator?', length: '1:01' },
{ name: 'Ring, ring, ring', length: '5:01' },
{ name: 'Fits in your pocket', length: '3:21' },
{ name: 'Can you hear me now?', length: '3:14' },
{ name: 'Wrong phone number', length: '2:15' }
]
};
var createSongRow = function (songNumber, songName, songLength) {
var template =
'<tr class="album-view-song-item">' +
' <td class="song-item-number" data-song-number="' + songNumber + '">' + songNumber + '</td>' +
' <td class="song-item-title">' + songName + '</td>' +
' <td class="song-item-duration">' + songLength + '</td>' +
'</tr>'
;
return template;
};
var setCurrentAlbum = function(album) {
// #1
var albumTitle = document.getElementsByClassName('album-view-title')[0];
var albumArtist = document.getElementsByClassName('album-view-artist')[0];
var albumReleaseInfo = document.getElementsByClassName('album-view-release-info')[0];
var albumImage = document.getElementsByClassName('album-cover-art')[0];
var albumSongList = document.getElementsByClassName('album-view-song-list')[0];
// #2
albumTitle.firstChild.nodeValue = album.name;
albumArtist.firstChild.nodeValue = album.artist;
albumReleaseInfo.firstChild.nodeValue = album.year + ' ' + album.label;
albumImage.setAttribute('src', album.albumArtUrl);
// #3
albumSongList.innerHTML =
'<thead>' +
'<tr>' +
'<th class="table-head-aligner">#</th>' +
'<th class="table-head-aligner">Title</th>' +
'<th class="table-head-aligner">Duration</th>' +
'</tr>' +
'<thead>'
;
// #4
for (var i = 0; i < album.songs.length; i++) {
albumSongList.innerHTML += createSongRow(i + 1, album.songs[i].name, album.songs[i].length);
}
};
var songListContainer = document.getElementsByClassName('album-view-song-list')[0];
var songRows = document.getElementsByClassName('album-view-song-item');
var playButtonTemplate = '<a class="album-song-button"><span class="ion-play"></span>'
//The problem is occurring in here somewhere
window.onload = function() {
setCurrentAlbum(albumPicasso);
songListContainer.addEventListener('mouseover', function(event) {
if (event.target.parentElement.className === 'album-view-song-item'); {
event.target.parentElement.querySelector('.song-item-number').innerHTML = playButtonTemplate;
}
});
for (var i = 0; i < songRows.length; i++) {
songRows[i].addEventListener('mouseleave', function(event) {
this.children[0].innerHTML = this.children[0].getAttribute('.song-item-number');
});
}
};
album.html
<!DOCTYPE html>
<html>
<head>
<title>Bloc Jams</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://ift.tt/1GIE5QB">
<link rel="stylesheet" type="text/css" href="http://ift.tt/1G498Ii">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/album.css">
</head>
<body class="album">
<!-- nav bar -->
<nav class="navbar">
<a href="index.html" class="logo">
<img src="assets/images/blocjams.png" alt="bloc jams logo"/>
</a>
<div class="links-container">
<a href="collection.html" class="navbar-link">collection</a>
</div>
</nav>
<main class="album-view container narrow">
<section class="clearfix">
<div class="column half">
<img src="assets/images/album_covers/01.png" class="album-cover-art"/>
</div>
<div class="album-view-details column half">
<h2 class="album-view-title">The Colors</h2>
<h3 class="album-view-artist">Pablo Picasso</h3>
<h5 class="album-view-release-info">1909 Spanish Mountains</h5>
</div>
<table class="album-view-song-list">
</table>
</section>
</main>
<script src="scripts/album.js"></script>
</body>
</html>
