addEventListener错误:未捕获的TypeError

时间:2018-01-14 14:43:13

标签: javascript

当我添加addEventListene时会导致以下错误:

  

addEventListener错误:未捕获TypeError:无法在ttt.html读取null的属性'addEventListener':24

我不知道为什么它会检测到空。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="Gaming" content="">
    <meta name="SkarmArri" content="">
    <title>Gameming</title>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/portfolio-item.css" rel="stylesheet">
    <link href="css/personal_page_style.css" rel="stylesheet">
    <script type="text/javascript">
        var game = ["N" , "N", "N",
                                "N", "N", "N",
                                "N", "N", "N"];
        var gamen = [0, 0, 0,
                                0, 0, 0,
                                0, 0, 0];
        var cs = 0;
        var score1 = 0;
        var score2 = 0;
        var diascawf = document.getElementById("b1")

        diascawf.addEventListener("click", doSet)

        function doSet(){
            alert("Hello World")
        }



    </script>
  </head>
  <body>
    <!-- Menu -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
      <div class="container">
        <a  href="index.html"><img src="assets/logo.png" alt="Logo" width="180px;" height="50px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contacts.html">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container">
        <div class="cont-div-white1">
            <table id="tb-ttt">
                <tr>
                    <td class="td-ttt" id="b1" onclick="doPutLetter('1')"></td>
                    <td class="td-ttt" id="b2" onclick="doPutLetter('2')">a</td>
                    <td class="td3-ttt" id="b3" onclick="doPutLetter('3')">a</td>
                </tr>
                <tr>
                    <td class="td-ttt" id="b4" onclick="doPutLetter('4')">a</td>
                    <td class="td-ttt" id="b5" onclick="doPutLetter('5')">a</td>
                    <td class="td3-ttt" id="b6" onclick="doPutLetter('6')">a</td>
                </tr>
                <tr>
                    <td class="td2-ttt" id="b7" onclick="doPutLetter('7')">a</td>
                    <td class="td2-ttt" id="b8" onclick="doPutLetter('8')">a</td>
                    <td class="td4-ttt" id="b9" onclick="doPutLetter('9')">a</td>
                </tr>
            </table>
        </div>
    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Gameming 2018</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>

1 个答案:

答案 0 :(得分:0)

添加一个侦听器以检查dom何时加载

window.addEventListener("load" , function() {});  



    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="Gaming" content="">
    <meta name="SkarmArri" content="">
    <title>Gameming</title>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/portfolio-item.css" rel="stylesheet">
    <link href="css/personal_page_style.css" rel="stylesheet">
    <script type="text/javascript">
      window.addEventListener("load", _loaded);
      function _loaded() {
        var game = ["N" , "N", "N",
                                "N", "N", "N",
                                "N", "N", "N"];
        var gamen = [0, 0, 0,
                                0, 0, 0,
                                0, 0, 0];
        var cs = 0;
        var score1 = 0;
        var score2 = 0;
        var diascawf = document.getElementById("b1")

        diascawf.addEventListener("click", doSet)

        function doSet(){
            alert("Hello World")
        }
      }


    </script>
  </head>
  <body>
    <!-- Menu -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
      <div class="container">
        <a  href="index.html"><img src="assets/logo.png" alt="Logo" width="180px;" height="50px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contacts.html">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container">
        <div class="cont-div-white1">
            <table id="tb-ttt">
                <tr>
                    <td class="td-ttt" id="b1" onclick="doPutLetter('1')"></td>
                    <td class="td-ttt" id="b2" onclick="doPutLetter('2')">a</td>
                    <td class="td3-ttt" id="b3" onclick="doPutLetter('3')">a</td>
                </tr>
                <tr>
                    <td class="td-ttt" id="b4" onclick="doPutLetter('4')">a</td>
                    <td class="td-ttt" id="b5" onclick="doPutLetter('5')">a</td>
                    <td class="td3-ttt" id="b6" onclick="doPutLetter('6')">a</td>
                </tr>
                <tr>
                    <td class="td2-ttt" id="b7" onclick="doPutLetter('7')">a</td>
                    <td class="td2-ttt" id="b8" onclick="doPutLetter('8')">a</td>
                    <td class="td4-ttt" id="b9" onclick="doPutLetter('9')">a</td>
                </tr>
            </table>
        </div>
    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Gameming 2018</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>