以下是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>An app</title>
</head>
<body>
<p id='namespace'> Namelist </p>
<button id="display" type="button">Display numbers</button></br>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" 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 = ['Hannah', 'Lucy', 'Brenda', 'Lauren', 'Mary'];
var liked = [];
var disliked = [];
function showName(){
var name = names[0];
if (!name){
name = 'Out of people';
}
document.getElementById('namespace').innerHTML = name;
}
function like(){
liked.push(names[0]);
names.splice(0, 1);
showName();
}
function dislike(){
disliked.push(names[0]);
names.splice(0, 1);
showName();
}
showName();
document.getElementById('likeButton').onclick = like;
document.getElementById('dislikeButton').onclick = dislike;
});
</script>
</html>
目前的错误是:uncaught TypeError: Cannot set property 'onclick' of null
我已经搜索了这个错误,它似乎是关于dom的东西,也许是元素没有完全加载到页面上的东西?
我希望解决方案在用户点击“喜欢”或“不喜欢”按钮后弹出不同的名称。然后在数组的末尾,文本将不再显示人。
答案 0 :(得分:0)
您的按钮的ID为likebutton
,您可以通过likeButton
更改
document.getElementById('likeButton').onclick = like;
要
document.getElementById('likebutton').onclick = like;
dislikebutton
的情况相同。