Javascript (mouseover mouseleave) html 元素未返回
Javascript (mouseover mouseleave) html elements not returning
所以我是前端和 JavaScript 的新手,来自 Rails 但我正在为 class 做一个项目,我遇到了一些麻烦。它是 spotify 的克隆,到目前为止我们只使用普通的旧 JS。我也一直在关注。
我们正在添加一个播放按钮,因此当您将鼠标悬停在 table 行上时,曲目编号所在的位置会出现一个播放按钮,当您的鼠标离开该行时,播放按钮会消失,但曲目编号会消失不再出现。
这是目前的主要问题。
下一个问题是当我 运行 浏览器旁边的控制台 window 并将鼠标悬停在一行上时,我收到以下错误:
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.
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');
});
}
};
我最后检查了一下,'.song-item-number'
不是一个属性。
因此,.getAttribute('.song-item-number');
是 returning undefined
。
getAttribute
获取指定属性的值,例如.getAttribute('class')
会 return class 名字。
所以我是前端和 JavaScript 的新手,来自 Rails 但我正在为 class 做一个项目,我遇到了一些麻烦。它是 spotify 的克隆,到目前为止我们只使用普通的旧 JS。我也一直在关注。
我们正在添加一个播放按钮,因此当您将鼠标悬停在 table 行上时,曲目编号所在的位置会出现一个播放按钮,当您的鼠标离开该行时,播放按钮会消失,但曲目编号会消失不再出现。
这是目前的主要问题。
下一个问题是当我 运行 浏览器旁边的控制台 window 并将鼠标悬停在一行上时,我收到以下错误:
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.
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');
});
}
};
我最后检查了一下,'.song-item-number'
不是一个属性。
因此,.getAttribute('.song-item-number');
是 returning undefined
。
getAttribute
获取指定属性的值,例如.getAttribute('class')
会 return class 名字。