質問: 0; } ?> ``` ``` img{ height: 230px; } div{ margin: 0px 40px 10px 40px; } .justify{ display: flex; justify-content: space-between; } ``` ### 問題点 上記のコードだと、まずjavascriptで画像の幅を取得し、それをphpに渡すところでString型になっていたので、intvalして数値に変換しようとしたのですが、なぜか0が渡されてしまいます。 結果$totalWidthにはどんどん0が足されるのみで改行してくれない状況です。 また、javascriptで取得した画像の幅(String型)を確認したところ、なぜか"0"になっていることがあります。 これについては読み込みを行う度に"0"だったり"307"だったりするので、同じコードを実行しているのに安定して取得できないという感じです。 学習中の身であり、コードがごちゃごちゃしてて申し訳ないんですが、頭が着いていかないので助言いただけるとありがたいです。 よろしくお願いします。
回答: まず、javascriptとphpが同時に動くと思っている、その前提が誤っています。 phpはサーバー側で処理されるもの、 javascriptはクライアント側(ブラウザ内)で処理されるもの です。 illbenocさんの書かれたものは、 1サーバー側でphpの部分だけが処理される 2ブラウザ側で表示される(javascriptが処理される) の順番で処理が行われていますので、 php内で使おうとしている「javascriptで取得した画像サイズ」はいつでも0です。 phpのお勉強をされているならば、 phpにも画像サイズを取得する関数はありますので、そちらを使ってはどうですか? javascriptのお勉強をされているのであれば、 htmlのタグ調整も含めて、javascript側で処理するようにしてはどうでしょうか。 なお、 > > javascriptで取得した画像の幅(String型)を確認したところ、なぜか"0"になっていることがあります。 > > これについては読み込みを行う度に"0"だったり"307"だったりするので、同じコードを実行しているのに安定して取得できない > > > こちらの原因は、javascriptで画像のサイズを取得する処理の前に 「画像ファイルの読込が終わっているか、いないか」の差です。 1回表示したことのある画像(同じパス・ファイル名)は、ブラウザ側でキャッシュされていれば、初めて表示する画像より早く読み込みができますし、初めて表示する画像でもサイズが変われば読み込みにかかる時間は変わります。(当然大きい方が時間がかかります) ``` document.getElementById('img' + countImg).width ``` この記述で、画像サイズを計るつもりなのであれば、「画像の読込が終わってから計る」ようにしなければ、安定した動作は得られません。