JavaScriptのJavascriptの問題、TypeError：comp1GameTitleがnull

-1

もう一度、もう一度やり直してください。私は多くの誤りがあります、それはただ私と一緒に冗談を言っています。コードはここで働いています=>https://jsfiddle.net/jh5tkfpp/フォーラムメンバー（Sridhar）によって投稿されました。しかし私のローカルWebサーバでは、それはTypeError: comp1GameTitle is nullを投げています。JavaScriptのJavascriptの問題、TypeError：comp1GameTitleがnull

var cGamePic = new Array("https://c6.staticflickr.com/9/8804/28522899701_efbaa953a7_n.jpg", "https://c5.staticflickr.com/7/6003/6004770804_692aecf57c_b.jpg", "https://c5.staticflickr.com/7/6006/6004652276_87ba0278a9_b.jpg", "https://c7.staticflickr.com/7/6139/6007896022_c7ac652043_b.jpg"); 
 
var cGameName = new Array("beach", "cycle1", "cycle2", "cycle3"); 
 
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1 
 

 
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2 
 

 
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container 
 
var comp1GameImage = document.querySelector("#container1 img"); //Image from main container 
 

 

 
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container 
 
var comp2GameImage = document.querySelector("#container2 img"); //Image from main container 
 

 

 
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; 
 
comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image

<!doctype html> 
 
<html> 
 
    <head> 
 
\t <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
 
\t <meta content="utf-8" http-equiv="encoding"> 
 
     <title>Random_page</title> 
 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
\t <script type="text/javascript" src="rnd.js"></script> 
 
    </head> 
 
    <body> 
 
     <div id="container1" style="float:left; width:40%; margin:10px;"> 
 
      <h1>Title</h1> 
 
      <img src="" width='100%' height='100%' /> 
 
     </div> 
 
     <div id="container2" style="float:left; width:40%; margin: 10px;"> 
 
      <h1>Title</h1> 
 
      <img src="" width='100%' height='100%' /> 
 
     </div> 
 
    </body> 
 
</html>

出典

2016-07-30 LeFizzy

内部rnd.jsですべてのコードを置くことができます。これは、想定しているようにinnerHtml＆imageを表示しています – jonju

それらがonloadイベントで実行されているので、それはjsfiddleで動作します。しかし、headにスクリプトを入れました。だから実行されると、DOMは準備が整っていないので、idがcontainer1の要素はありません。ですから、スニペット

<body> 
//Rest of code 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="rnd.js"></script> 
</body>

他

を以下のように変更を加えることができ、あなたはまだ、ヘッダータグ内rnd.jsを保つが、私はコードが正常に動作していると思いますwindow.onload機能

出典

2016-07-30 10:14:13 brk

JavaScriptのJavascriptの問題、TypeError：comp1GameTitleがnull

答えて

関連する問題