style要素がundefinedで帰ってくる

javascriptでゲームを作っています。その中で作った要素の高さを変えて行きたいのですが、要素.styleとするとundefinedが帰ってきてしまいます。。。
その前の動作の中で
１．作る(createElement)
２．加える(appendChild)
３．style追加
４．配列に入れておく(array.push)
と加工しています。
ご協力力お願いしますm(__)m

javascript
1//障害物落下に追加
2 function setfallobject(){     
3     var addedobject = Makeobject().added;
4Fallingobject.push("addedobject");
5 objectY.push(100);
6     console.log(addedobject);
7 }
8      
9  // function setfallobject(){     
10     var addedobject = Makeobject().added;
11Fallingobject.push("addedobject");
12 objectY.push(100);
13     console.log(addedobject);
14 }
15      
16  // function setfallobject(){     
17     var addedobject = Makeobject().added;
18Fallingobject.push("addedobject");
19//objectYは高さを表す配列
20 objectY.push(100);
21     console.log(addedobject);
22 }
23      
24  //障害物落下    
25 function Fallobject(){
26console.log(objectY);
27for(objectYNumber=0;objectYNumber<Fallingobject.length;objectYNumber++){
28//上からの距離
29 objectY[objectYNumber] = objectY[objectYNumber] + container.clientWidth*0.01;
30//当てはめたい
31  Fallingobject[objectYNumber].style.top = objectY[objectYNumber] + "px"; 
32//>>Uncaught TypeError: Cannot set property 'top' of undefined
33}     
34

全文

html
1<body>
2<button id=button>game start</button>
3<div id=container>
4    <div id="topzone">
5      <div id="escapezone">
6    <div id="escaper"></div>
7     </div>
8    </div>
9    <div id="bottomzone">
10      
11    </div>
12</div>
13    
14
15</body>

javascript
1/*global document,escaper*/
2  document.addEventListener("DOMContentLoaded", function() {
3       //初期設定~
4    (function () {
5    
6   var button = document.getElementById("button"),
7    container = document.getElementById("container"),
8     topzone = document.getElementById("topzone"),
9    bottomzone = document.getElementById("bottomzone"),
10    escaper = document.getElementById("escaper");
11   var fallobjecttimes = 0;   
12    Fallingobject = [];
13   objectY = [];
14            
15       //~初期設定
16        
17   //開始処理    
18button.addEventListener("click",Startgame,false); 
19       
20function Startgame(){
21         alert("game started!!");
22         //障害物作成、選択、設置
23  
24    
25
26   setInterval(function(){
27       Makeobject();
28       Setobject();
29   },5000);
30    
31   
32         
33     setInterval(function(){
34         fallobjecttimes++;
35         if(fallobjecttimes===20){
36　　　　　　setfallobject();
37            fallobjecttimes = 0; 
38             console.log("追加完了")
39     console.log(Fallingobject);
40    }
41         Fallobject();
42   },250);
43   
44         
45      //クリック動作  
46 container.addEventListener("click",Moveescaper,false);
47 }       
48 
49      
50 }());         
51     
52      //障害物作成
53      function Makeobject(){
54    var objectMaking = document.createElement("div"),
55      objectAdding = topzone.appendChild(objectMaking);
56       return {made: objectMaking, added: objectAdding};
57     }
58      
59      //障害物配置、選択
60      function Setobject(){
61          var styleA = {
62          width: "10%",
63          height: "10%",
64          backgroundColor: "green"
65         },
66     
67     styleB = {
68          width: "15%",
69          height: "15%",
70          backgroundColor: "yellow"
71         },
72    
73     styleC = {
74          width: "20%",
75          height: "20%",
76          backgroundColor: "purple"
77         },
78    
79     styleD = {
80          width: "25%",
81          height: "25%",
82          backgroundColor: "black"
83         }
84          
85     styleE = {
86          width: "30%",
87          height: "30%",
88          backgroundColor: "aqua"
89         }    
90     
91      styleF = {
92          width: "100%",
93          height: "10%",
94          backgroundColor: "white"
95         }        
96          var Madeobject = Makeobject();
97       var objectstyle = Madeobject.made.style;
98var basicobjectstyle = Madeobject.added.classList.add("basisObjectstyle");  
99
100      var preescaperX = escaper.style.left;
101      
102       escaperX = preescaperX.slice(0,preescaperX.length-2); 
103       objectstyle.left =  escaperX + "px";
104          if(escaperX<container.clientWidth*0.2){
105              var styletype = styleA;
106            console.log("20%未満");
107              }
108         else if(escaperX<container.clientWidth*0.4){
109             var styletype = styleB;
110             console.log("40%未満");
111          }
112          else if(escaperX<container.clientWidth*0.6){
113             var styletype = styleC;
114              console.log("60%未満");
115          }
116          else if(escaperX<container.clientWidth*0.8){
117              var styletype = styleD;
118              console.log("80%未満");
119          }
120          else if(escaperX<container.clientWidth){
121              var styletype = styleE;
122              console.log("100%未満");
123          }
124          else{
125              var styletype = styleF;
126              console.log("100%");
127          }
128      
129          for(styleNumber in styletype){
130            objectstyle[styleNumber] = styletype[styleNumber];
131          } 
132       return {objectstyle: objectstyle, basicobjectstyle: basicobjectstyle};
133      }
134      
135  function setfallobject(){     
136     var Settedobject = Setobject();
137Fallingobject.push("Settedobject");
138 objectY.push(100);
139     console.log(Settedobject);
140 }
141      
142  //障害物落下    
143 function Fallobject(){
144console.log(objectY);
145for(objectYNumber=0;objectYNumber<Fallingobject.length;objectYNumber++){
146 objectY[objectYNumber] = objectY[objectYNumber] + container.clientWidth*0.01;
147 console.log(Fallingobject.style);
148} 
149};
150     
151
152      
153          //クリック動作       
154   function Moveescaper(E){
155         var x = E.offsetX, 
156        left = escaper.style.left,
157              leftNum = left.slice(0,left.length-2);
158          escaper.style.transition = leftNum*5 + "ms";
159           escaper.style.left = x + "px"; 
160       
161       return {x: x, leftNum: leftNum};
162       
163      }
164      });

m.ts10806

2019/11/12 22:48

コードインデントを整理されたほうが良いかと思います。お手元のコードを調整のうえ、質問本文のコードを更新してください

行動規範の内容に同意します

回答2件

ベストアンサー

要素.styleとするとundefinedが帰ってきてしまいます

Fallobject() 内の Fallingobject.style のことであれば、
まずは、意図する要素を格納しましょう。
この関数内では、要素.style ではなく、配列.style になっています。

console.log(Fallingobject.style);

yambejp さんの回答通り、この配列には文字列しか格納されていませんので、

仮に

console.log(Fallingobject[objectYNumber].style); // undefined

としても、undefined にしかなりません。

投稿2019/11/13 06:04

AkitoshiManabe

総合スコア5432

jouson-129

2019/11/14 12:16

配列を作りすぎていてごちゃ混ぜになっていました。。。配列を一つに統一するとともに指摘箇所を直しました。。。ありがとうございましたm(__)m

AkitoshiManabe

2019/11/14 12:24

マークアップ構造に依存しますけど、DOM要素を参照するときはCollection を取得する方法も使えます。あと、ソースコードはインデント（桁揃え）した方がいいですよ。ゲームのような複雑なものを作るときは特にです。Google JavaScript Guide にもあるように、半角スペース 2個で揃えると他所に貼り付けやすくなります。

行動規範の内容に同意します