JavaScriptで関数が呼び出されたときにJavaScriptエラーが発生しました。

コードワードとしてJavaScriptを使用して数値を推測できるようにしました。私はそれが何をしなければならないかを正確に知っているが、それをやっていない。 Webページを開くと、1から100までの乱数を得るというアイデアが（動作するかどうかを調べるために）表示されます。奇妙なことに、同じJavaScriptファイル内の関数を呼び出すとエラーになりますが、HTMLボタンを使用して関数を呼び出すと、完全に正常に機能しています。 F12-コンソールは次のエラーを与える：JavaScriptで関数が呼び出されたときにJavaScriptエラーが発生しました。

未定義またはnull参照のプロパティ 'innerHTMLプロパティ' を設定することができません

私は、次のコードを持っている：

var guessTheNumber = function() { 
 

 
// var number = prompt("Tell me a number between 1 and 100."); 
 
var x = document.getElementById("JS1"); 
 

 
x.innerHTML = Math.floor((Math.random() * 100) + 1); 
 
} 
 

 

 
guessTheNumber();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>JS test</title> 
 

 
\t <script type="text/javascript" src="JavaScript.js"></script> 
 
</head> 
 
<body> 
 
\t <button onclick="guessTheNumber()"></button> 
 
\t <p class="test">test</p> 
 
\t <p id="JS1"></p> 
 
</body> 
 
</html>

を私はブラウザとしてMicrosoft EdgeとGoogle Chromeを試しましたが、結果はありませんでした。私は何が間違っているのか分からないので、どんな助けもありがとう！

出典

2017-07-08 Brent Meeusen

DOMがある前に、あんたのjs呼び出しが行われやすい<body>タグの下部に<script>をロードし、これを修正するには

– Pascalz

準備が整いました。どうすれば修正できますか？ –

問題は、javacriptファイルがBEFORE DOMのためロードされているため、document.getElementById("JS1");は定義されません。

<!DOCTYPE html> 
<html> 
<head> 
    <title>JS test</title> 


</head> 
<body> 
    <button onclick="guessTheNumber()"></button> 
    <p class="test">test</p> 
    <p id="JS1"></p> 

<script type="text/javascript" src="JavaScript.js"></script> 
</body> 
</html>

出典

2017-07-08 18:49:09 frozen

体の下部にあるスクリプトは一般的には良い練習ですが、 – frozen

<script> 
// self executing function here 
var guessTheNumber = function() { 

    // var number = prompt("Tell me a number between 1 and 100."); 
    var x = document.getElementById("JS1"); 

    x.innerHTML = Math.floor((Math.random() * 100) + 1); 
} 
(function() { 

    // your page initialization code here 
    // the DOM will be available here 
    guessTheNumber(); 
})(); 
</script>

domが準備完了するまで待つ必要があります。

headスクリプトタグをbody以下に移動して宣言することは絶対に避けてください。

出典

2017-07-08 18:47:45 jdmdevdotnet

何が問題なのですが、これでどのように修正されますか？ –

「結果なし」とはどういう意味ですか？ – jdmdevdotnet

問題は、$が未定義で、コード全体が実行されなくなることです。 –

は（jQueryのなし）このようにしてみてください：

var guessTheNumber = function() { 

    // var number = prompt("Tell me a number between 1 and 100."); 
    var x = document.getElementById("JS1"); 

    x.innerHTML = Math.floor((Math.random() * 100) + 1); 
} 
document.addEventListener('DOMContentLoaded', function(){ 
    guessTheNumber(); 
}, false);

出典

2017-07-08 18:51:57 Pascalz

JavaScriptで関数が呼び出されたときにJavaScriptエラーが発生しました。

答えて

関連する問題