Javascript(mouseover mouseleave）html元素未返回
Javascript (mouseover mouseleave) html elements not returning
所以我是前端和JavaScript的新手，来自Rails，但我正在为类做一个项目，遇到了一些麻烦。它是一个spotify的克隆，到目前为止，我们只使用普通的旧JS。我一直都是这样追随的。
我们添加了一个播放按钮，因此当您将鼠标悬停在表格行上时，曲目编号所在的位置会出现一个播放键，当您的鼠标离开该行时，播放按钮会消失，但曲目编号不会重新出现。
这是迄今为止的主要问题。
下一个问题是，当我沿着浏览器窗口运行控制台并将鼠标悬停在一行上时，我会得到以下错误：
Uncaught TypeError: Cannot set property 'innerHTML' of null
//The problem is occurring here评论下面是我认为问题发生的地方，但我已经包含了文件的其余部分，以备您需要查看
http://jsbin.com/hiyojo/edit?js，控制台，输出
白蛋白.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');
});
}
};
白蛋白.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');正在返回undefined。
getAttribute获取指定属性的值，例如.getAttribute('class')将返回类名。
相关文章：
- react-让一个元素返回两个相邻的<tr>标签
- Javascript可见元素返回未定义
- 如果循环中至少有一个元素返回 false，如何将变量设置为 false
- 从异步调用返回数组，然后为数组的每个元素返回其他异步调用
- jQuery mMenu如何通过单击某些元素返回到上一节
- Ajax 元素返回完整的 html 代码
- Javascript:计算每个表的表行数，并向相应的元素返回一个值
- 激活 .stop(） 后，将元素返回到其起始位置
- 访问 iFrame 中的元素返回空值
- Knockout.js 从 observableArray 中提取元素返回 undefined
- 获取 0 的文档元素返回什么
- scrollTop为javascript中的所有文档元素返回0，但滚动事件在body标记上触发
- 从Ajax生成的DOM元素返回id
- 如何在交换后将列表元素返回到其原始样式
- 文本元素返回"undefined"
- 从数组中获取随机元素返回相同的元素
- 从聚合物元素返回简单值
- React:将新插入的子元素返回给父元素以更新状态
- 元素返回NaN作为宽度
- 新添加的DOM元素返回null
