for in文の条件式中で変数を使いたい

Question

javascriptを使ってcssを編集する際に配列を使っています。
その配列名を変数にしてfor in文の後の値に組込みたいのです。
consoleで変数のiを確認したところ文字列なのですが、for in文にいれるとエラーを吐いてしまいます。if文を用いる以外の方法があったらそれで代用したいです、、、

問題の場所
if案

if(styleA){
var styleA = {
          width: "10%",
          height: "10%",
          backgroundColor: "green"
         }
}
    
 if(styleB){
    var styleB = {
          width: "15%",
          height: "15%",
          backgroundColor: "yellow"
         }
      }

      //障害物作成
      function Makeobject(){
          var object = document.createElement("div");
     topzone.appendChild(object);
   console.log(object);
          var i = "styleA";
          console.log(styleB);
           for(styleNumber in i){
              var objectAstyle = object.style;
            objectAstyle[styleNumber] = styleA[styleNumber];
          }

やりたい感じ

var styleA = {
          width: "10%",
          height: "10%",
          backgroundColor: "green"
         }
     
    var styleB = {
          width: "15%",
          height: "15%",
          backgroundColor: "yellow"
         }
      
      //障害物作成
      function Makeobject(){
          var object = document.createElement("div");
     topzone.appendChild(object);
   console.log(object);
          var i = "styleA";
          console.log(styleB);
           for(styleNumber in i){
              var objectAstyle = object.style;
            objectAstyle[styleNumber] = styleA[styleNumber];
          }

javascript全文

document.addEventListener("DOMContentLoaded", function() {
       //初期設定~
(function () {
   var button = document.getElementById("button"),
    container = document.getElementById("container"),
     topzone = document.getElementById("topzone"),
    bottomzone = document.getElementById("bottomzone"),
    escaper = document.getElementById("escaper");
    console.log(button);
       //~初期設定
        
     //開始処理
    button.addEventListener("click",Startgame,false); 
        
     function Startgame(){
         alert("game started!!");
    //障害物作成
setInterval(Makeobject,1000);
        
      //クリック動作  
 container.addEventListener("click",Moveescaper,false);
 }       
}());
      
     var styleA = {
          width: "10%",
          height: "10%",
          backgroundColor: "green"
         }
     
    var styleB = {
          width: "15%",
          height: "15%",
          backgroundColor: "yellow"
         }
      
      //障害物作成
      function Makeobject(){
          var object = document.createElement("div");
     topzone.appendChild(object);
   console.log(object);
          var i = "styleA";
          console.log(styleB);
           for(styleNumber in i){
              var objectAstyle = object.style;
            objectAstyle[styleNumber] = styleA[styleNumber];
          }
     
     //障害物落下
     function Fallobject(){
     
 }    
      
          //クリック動作       
   function Moveescaper(){
          var x = event.x,
        left = escaper.style.left,
              leftNum = left.slice(0,left.length-2);
          escaper.style.transition = leftNum*5 + "ms";
           escaper.style.left = x + "px"; 
       console.log(114);
      }
    });

Comments

[azuapricot]

マークダウンができていない、誤字がひどい、インデントが見るも無残でコードがかわいそうです。

Answer 1

var i = "styleA";

とありますが、

      var i = styleA;

なのでは。

Comments

[jouson-129]

指摘された場所と
```javascript
//前
objectAstyle[styleNumber] = styleA[styleNumber];
//後
objectstyle[styleNumber] = i[styleNumber];
```
の変化で治せました、、、
ありがとうございますm(__)m