TypeError:无法读取null的属性“addEventListener”

时间:2017-12-31 15:45:03

标签: javascript html addeventlistener

控制台向我显示以下错误“类型错误无法读取属性addeventlistner的null”我的脚本是在页面的末尾。如何清除空值使点击和功能在这里运行。可以找到解决方案,主要是错误放置头部的脚本,但我从头开始放在底部。帮助我学习这个问题并解决!

     <div class="form">
       <label for="guessField">Enter a guess: </label>
       <input type="text" id="guessField" class="guessField">
       <input type="submit" value="Submit guess" class="guessSubmit">
    </div>

  <p class="guesses"></p>
  <p class="lastResult"></p>
  <p class="lowOrHi"></p>
<script>

    var random = Math.floor(Math.random() * 100) + 1;

    var userguess = document.querySelector('.guessField');

    var userSubmit = document.querySelector('guessSubmit');

    var guesses = document.querySelector('guesses');

    var lastResult = document.querySelector('lastResult');

    var lowOrHi = document.querySelector('lowOrHi');

    var guesscount = 1;

    var resetbutton;

    function checkGuess() {

        var userinput = Number(userguess.value);

        if (guesscount === 1) {
            guesses.textContent = 'previous guesses:';
        }
        else {
            guesses.textContent = 'previous guesses' + userinput;
        }

        if (userinput === random) {

            lastResult.textContent = "awesome bruh you got it right";
            lastResult.style.backgroundColor = 'green';
            gameOver();
        }

        else if (guesscount === 10) {
            lastResult.textContent = "oops you have run out of try";
            gameOver();
        }

        else {
            lastResult.textContent = "wrong value";
            lastResult.style.backgroundColor = 'red';
        }

        if (userinput < random) {
            lowOrHi.textContent = "it was too low";
        }

        else if (userinput > random) {
            lowOrHi.textContent = "it was too high";
        }

        guesscount++;
    }

    userSubmit.addEventListener('click', checkGuess);

</script>

1 个答案:

答案 0 :(得分:3)

尝试正确更新所有选择器。您在其中一些内容中遗漏了. / #

var userSubmit = document.querySelector('.guessSubmit');
//                                   ----^----
// add `.` or `#` based on what guessSubmit selector is for