所以我是前端和JavaScript的新手，来自Rails，但我正在为一个项目上课，我遇到了一些麻烦。它是一个spotify克隆，到目前为止我们只使用普通的旧JS。而且我一直在跟进。
我们正在添加播放按钮，因此当您将鼠标悬停在表格行上时会出现一个播放按钮，其中存在曲目编号，当您的鼠标离开该行时，播放按钮会消失，但曲目编号不会重新出现。 / p>
这是迄今为止的主要问题。
下一个问题是当我在浏览器窗口旁边运行控制台并将鼠标悬停在一行上时，我收到以下错误：
Uncaught TypeError: Cannot set property 'innerHTML' of null
//The problem is occurring here评论下面是我认为问题出现的地方，但我已经包含了文件的其余部分，只是您需要查看。
http://jsbin.com/hiyojo/edit?js,console,output
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://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<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>
解决了：
问题最终出现在这里：
window.onload = function() {
setCurrentAlbum(albumPicasso);
songListContainer.addEventListener('mouseover', function(event) {
/* There was a semi-colon at the end of this if condition which turned out to be what was throwing the innerHTML null error */
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) {
/* The main issue with the track numbers not reappearing was here I was trying to getAttribute('.song-item-number') while getAttribute() should have been retrieving an actual attribute as shown below: */
this.children[0].innerHTML = this.children[0].getAttribute('data-song-number');
});
}
};
答案 0 :(得分：1)
最后我查了一下，'.song-item-number'不是属性。
因此，.getAttribute('.song-item-number');正在返回undefined。
getAttribute获取指定属性的值，例如.getAttribute('class')会返回班级名称。