保存できるようになったはずなのに、
パソコンでは動くのに、
スマホだけ、なぜか保存できない。
何回やってもダメ。
写真を入れてもダメ。
写真なしでもダメ。
エラーも出ない。
本当に意味が分からなくて、
かなり長い時間ここで止まりました。
でも、原因はとてもシンプルでした。
原因は、たったこれだけでした
この4行が、ありませんでした。
const weightEl = document.getElementById('weight');
const foodEl = document.getElementById('food');
const memoEl = document.getElementById('memo');
const photoEl = document.getElementById('photo');
これを追加した瞬間、
スマホでも一発で保存できるようになりました。
何が起きていたのか
保存ボタンを押したとき、JavaScriptはこう命令しています。
- weight の値を取ってきて
- food の値を取ってきて
- memo の値を取ってきて
でも実は、
どの入力欄が weight なのか
どれが food なのか
JavaScriptが分かっていませんでした。
パソコンではたまたま動いていただけで、
スマホでは完全に止まっていました。
見た目は動いているのに、裏では何も取れていなかった
これが本当に厄介でした。
入力はできる。
ボタンも押せる。
でも、
中身は空っぽのまま送られていた。
だから保存できなかったんです。
この4行は「入力欄の場所を教えるコード」だった
HTMLにある入力欄は、ただの「箱」。
JavaScriptは、その中身を読み取る「人」。
getElementById は、
「この箱は weight という名前ですよ」
と名札を貼る作業でした。
名札がないと、読み取る人は
どの箱を見ればいいのか分からず、そこで止まってしまいます。
「パソコンでは動いた」の正体
実は一部のブラウザには、
「ID名を、そのままJavaScriptで使えてしまう」
という、少しお節介な機能があります。
だからパソコンでは動いているように見えました。
でもスマホのブラウザ（Safariなど）は、ここがとても厳密です。
名札が無いと、
「そんなものは存在しません」
と判断して、処理を止めます。
エラーも出さず、静かに止まります。
これが、スマホだけ動かなかった理由でした。
初心者が一番ハマるポイント
これは見た目では絶対に気づけません。
エラーも出ません。
でも動かない。
私が一番時間を使った原因は、ここでした。
今なら分かること
この4行は、
アプリと入力欄をつなぐ「橋」でした。
これが無いと、
ボタンを押しても、何も送れない。
だから保存できなかった。
原因は、PHPでもサーバーでも写真でもなく、
JavaScriptが途中で止まっていたことでした。
次の記事では
なぜ私は、URLを間違えて404地獄になったのか。
「拡張子」という言葉すら知らなかった話を書きます。
コメント