Question

我正在尝试在javascript中创建一个数字猜谜游戏并且游戏正在运行，除非用户选择的数字小于“mysterNumber”的值。

控制台中的错误是：

scripts.js:28 Uncaught TypeError: Cannot set property 'innerHTML' of null(…)
playGame @ scripts.js:28
clickHandler @ scripts.js:17

这是HTML

    // Game variables 
    var mysteryNumber = 50;
    var playerGuess = 0;
    
    // The input and output fields
    var input = document.querySelector("#input");
    var ouput = document.querySelector("#ouput");
    
    // The button 
    var button = document.querySelector("button");
    
    button.style.cursor = "pointer";
    
    button.addEventListener("click", clickHandler, false);
    
    function clickHandler(){
    	playGame();
    }
    
    function playGame(){
    	playersGuess = parseInt(input.value);
    
    	if(playersGuess > mysteryNumber){
    		output.innerHTML = "That's too high."
    	}else if(playersGuess < mysteryNumber){
    		ouput.innerHTML = "That's too low."
    	}else if(playersGuess === mysteryNumber){
    		output.innerHTML = "You got it!"
    	}
    }

<p id="output">I am thinking of a number between 0 and 99.</p>
    <input id ="input" type="text" placeholder="Enter your guess...">
    <button>guess</button>

Answer 1

您的代码中有几个拼写错误。确保您始终使用“输出”而不是“输出”。

Answer 2

正如@Igor提到的，你可以创建一个片段作为你问题的一部分，我为你做了这个，答案变得更容易发现。 @msidak表示这是拼写错误，当然，你的代码只有在猜测太低而且拼写了＃34;输出＆＃34;时才会失败。 as＆＃34;输出＆＃34;。

如果你想接受我建议@msidak的最佳答案，他先把它弄好我只是觉得很无聊把它放在一起

＆＃13;

    // Game variables 
    var mysteryNumber = 50;
    var playerGuess = 0;
    
    // The input and output fields
    var input = document.querySelector("#input");
    var ouput = document.querySelector("#ouput");
    
    // The button 
    var button = document.querySelector("button");
    
    button.style.cursor = "pointer";
    
    button.addEventListener("click", clickHandler, false);
    
    function clickHandler(){
    	playGame();
    }
    
    function playGame(){
    	playersGuess = parseInt(input.value);
    
    	if(playersGuess > mysteryNumber){
    		output.innerHTML = "That's too high."
    	}else if(playersGuess < mysteryNumber){
    		output.innerHTML = "That's too low."
    	}else if(playersGuess === mysteryNumber){
    		output.innerHTML = "You got it!"
    	}
    }

＆＃13;

<p id="output">I am thinking of a number between 0 and 99.</p>
    <input id ="input" type="text" placeholder="Enter your guess...">
    <button>guess</button>

＆＃13;

JavaScript：创建一个简单的猜数游戏并获取未捕获的类型错误

2 个答案: