JSでtransformを設定したいが、動かない

Question

質問は表題の通りです。swImgはjavascriptで表示させています。htmlには書かれていません。
ちなみに下のコードのbackgroundも変化しません。
書き方がおかしいのでしょうか。

コード
  var sw = document.getElementById("swImg");
  sw.style.webkitTransform = "translateX(70px)";
  sw.style.background = "#78bd78";

回答をいただいて

順番的には以下の様になっています。

コード

function hoge(){
  insertElement += "<div id=\"switchArea\" onclick=\"on_off_B()\">";
  insertElement += "<div id=\"swImg\"></div>";
  insertElement += "</div>";
//以下省略
}

function on_off_B(){
  var sw = document.getElementById("swImg");
  sw.style.webkitTransform = "translateX(70px)";
  sw.style.background = "#78bd78";

  hoge();
}


hoge();

Comments

[Lhankor_Mhy]

このスクリプトと #swImg は、DOM上でどちらが先に登場しますか？

[oika77]

順番に関して追記いたしました。

Answer 1

コード
function on_off_B(){
  var sw = document.getElementById("swImg");
  sw.style.webkitTransform = "translateX(70px)";
  sw.style.background = "#78bd78";

  hoge();
}

ここの部分を

コード
function on_off_B(){
  hoge();

  var sw = document.getElementById("swImg");
  sw.style.webkitTransform = "translateX(70px)";
  sw.style.background = "#78bd78";

}

hoge()この関数を先に読み込むことで、うまく反応してくれました。
コメントを返しているときに、「更新」という言葉を使った時に、ハッと気がつきました。

Comments

[Lhankor_Mhy]

私も「hogeを先に実行してください。」とコメントに書いたと思うのですが、わかりにくかったようですね。

[oika77]

申し訳ありません！
そういうことだったんですね。

[Lhankor_Mhy]

いえ、ご解決されて何よりです。

Answer 2

こんばんは。

補足依頼欄にも書きましたが、スクリプトの読み込みタイミングが原因のように思えます。
そのスクリプトをbody要素の一番最後（</body>の直前）に移動してみてください。

Comments

[oika77]

回答ありがとうございます。
ただ、直前に移動してみましたが、うまくいきませんでした。

[Lhankor_Mhy]

hogeを先に実行してください。存在しない要素を操作しようとしても失敗します。

↓この質問と似たような話です。
https://teratail.com/questions/24714

[oika77]

回答ありがとうございます。すみません.上の追記には書き忘れてしまいましたが、hogeはロードと共に実行される関数になっています。なので、swImgの実態はあるはずだと思っているのですが、うまくいきません。
ちなみに、追記に書いた二つの関数の位置を逆にしてみましたがうまくいきませんでした。
今後、もう少し試行錯誤を繰り返してみます。
また何かありましたら、よろしくお願いいたします。

[Lhankor_Mhy]

あまり後出しをしないでほしいのですが……
再現可能なコードをご提示ください。

[oika77]

ほんと申し訳ありません。上の追記に追加いたしました。switchAreaの部分はボタンになっていまして、クリックすると再びhoge()の関数が更新されるといった感じです。

[oika77]

回答していただき、本当にありがとうございました。