为什么我从此代码中收到JavaScript错误?

时间:2016-06-09 09:27:02

标签: javascript arrays

以下是代码:

<!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的东西,也许是元素没有完全加载到页面上的东西?

我希望解决方案在用户点击“喜欢”或“不喜欢”按钮后弹出不同的名称。然后在数组的末尾,文本将不再显示人。

1 个答案:

答案 0 :(得分:0)

您的按钮的ID为likebutton,您可以通过likeButton

获取该按钮

更改

document.getElementById('likeButton').onclick = like;

document.getElementById('likebutton').onclick = like;

dislikebutton的情况相同。