見出し画像

ざまのエンジニア勉強日記#20

ざま。

エンジニア採用をしている私が、
エンジニアと話ができるようになるために色々勉強する話。

気づいたら20記事目。毎日更新は出来てないけど、なんとか続いている。数年後、これを見返した私がこんな時期もあったなって思えればいいなと思う。


さて、前々回からつくっているおみくじ。
そろそろみんなも飽きてくるはずだから、今回はさくっと終わらせて別のことに移って行きたい。


付けたい機能
・結果表示した後、おみくじする前に戻るボタン
・結果別のコメント表示
・クリックから結果がでる間の焦らし時間
・結果をポップアップ風に表示

…と思ったけど、書き出したらそこそこあって、さくっと終わりそうもないな。笑
まあ、いいやとりあえずやってみて状況に応じて日記の内容は変えていこう。


・結果別のコメント表示
これは多分そんなに難しくない。クリック後のコメント消す処理は出来てるから、文字を指定してあげればいけるはず。

画像1

うん。これは個別にtextContentを設定したら想定通りの動きをしてるからOKだね。




・戻るボタン設置
ボタンを設置してクリックしたら、最初の状態に戻すような動きをさせられればいいんだけど、どうだろう…。それかボタンは設置しないで、前の宝探しゲームの時に使ったtoggleみたいな感じでもできそう…？

ドットインストール見直したけど、前回toggleはcrassListを付けたり外したりしてるのかー。今回の応用はできるのかな…。toggleってどういった要素に対して使えるものなんだろう。

とりあえずボタンを作ってみる？多分createElemntだよ(ほんとかよ)




…できなかった。笑

const btn = document.createElement('button');

document.body.appendChild(btn);

前回ドットインストールでdivをcreateしたコードがこの上のやつなんだけど、これをbuttonに変えたらできるかなって思ったらだめだった。
うーん。なんで？一回HTMLに書いてみるか。なんかわかるかも。


画像2

ああ、そうか何もスタイルの指定をしてないから左に寄っちゃうのか。まあでもこういうのが出したいんだけど…ってあれまって、隣にいる小さい子はどなた？も、もしかして…。




一旦HTMLに書いたbuttonタグ消してみる。

画像3

わああああああ！！
やっぱりこの子はJavascriptが作り出してる子だった！！
中身空だから小さいボタンになることは想定してたのに、真ん中しか見てなくて気付かなかったｗｗｗ
ちゃんとJavascriptでbutton生成できてたじゃん！！いえーい！

…生成できたのはいいけど、ボタンの中の文字どうやって入れるんだろう←
この生成されたボタンに対してvalue属性を付けるってこと？え？？


色んな記事を読み漁った結果、innerHTMLでいじれる気もしたけど、とある記事で

HTML要素のtextContentは、HTML要素が持つ文字列としての内容を保持しています。JavaScriptから変更することも可能で、textContentを変更するとp要素であれば表示されている文字列も変更されます。

という文章を目にして、もしかして？と思いtextContentを書き加えてみる。


画像4

わー正解だったー。
考えてみればタグの間に挟む文字列なんだからtextContentでできるよね。divの文字変える時には普通に使ってたのに、buttonになったら気付かなくなるの怖いね。頭が固いというか悪いというか。ね。笑

出てきたけど、この子端っこが好きなのか、真ん中に寄って来てくれないのね。
どうしたら真ん中に来てくれるのかな。ボタンちゃん、チョコ好き？おばちゃん美味しいチョコ持ってるよ←





そうだ、divに突っ込むか
divの間にボタンちゃんを挟んであげて、divに対してスタイルを指定してあげれば真ん中に連れて来てくれるんじゃない…！？

…と思ったけど、特定のdivにappendChildするのってどうやるの？←

document.body.appendChild(btn);

どう考えても、このbodyの部分を変えるはずだけど、これをどうしたらいい？単純にbodyの部分をボタンちゃんを挟んだdivのidにすればいいのかな…？


<body>
   <div id="box"><img id="result" src="image/omikuji.png"></div>
   <div id="p">やってみる？</div>
   <div id="reset"></div>

   
   <script src="js/omikuji2.js"></script>
</body>

HTML内にresetっていうidのdivを追加。

   const reset = document.getElementById('reset');
   const btn = document.createElement('button');
   
   reset.document.appendChild(btn);
   btn.textContent = 'もう一回やってみる？';

Javascriptはこんな感じに書いてみた。さてどうかな…。



画像5

あれ、なんかエラー吐き出してるな。なになに？Cannot read property 'appendChild' of undefined…appendChildする要素が見つからないぜ！って感じかな。ふむ。。親要素を指定する書き方が間違ってるのね。





・・・うーん？
結構悩んだ。片道45分の通勤電車往復している間に調べたりしたけど、正解にたどり着けず帰宅。帰宅後も色んな解説サイトを見たけど結局分からず、自分のコードを眺める。そしてふと、

reset.document.appendChild(btn);

もしかして、これのdocument要らないんじゃない？と思い立ち削除してブラウザを更新してみると。


画像6

ボタンちゃんは出てきた。エラーは出てこない。そうかこうだったのか。笑
じゃあスタイル指定してみよう。



画像7

#reset {
   margin: 0 auto;
   text-align: center;
}

marginも設定したけど、text-alignだけで真ん中に寄ってきてくれた。ついでやってみる？って文字がくどかったので修正。とりあえず、理想としていた形にはなったかな。

折角戻るボタンを作ったから、本当はクリックは1回だけしかできないようにしたいんだけど、そこら辺の指定の仕方がわからないな。
クリック回数カウントさせて1回だけに制御するとかできる？


そのほかやりたかったこと

・焦らし時間
クリック後に｢なにがでるかな？｣的な待たせる時間を作りたい。文字で出すか、読み込み中みたいななんかクルクル回るアニメーションみたいなのをくっつけるか。多分簡単なのは前者よね。

・結果のポップアップ表示
これもよくある、クリックに結果がふわっと画面上に表示されるみたいなやつ、あれをやりたい。
前回のちょっとしらべたら、alertでは画像が出せそうもないから別の角度から検討しないといけないっぽい。別ウィンドウを開かせる処理の仕方みたいなのは、ありそうだったけど個人的には小窓的な表示はあんまり好きじゃない。からどうにか別の方法で出せないものか。

想定以上に長くなっちゃったし、読んでくれてる人ももう1月半ばなのにおみくじ引きずっててもあれだから、この2つはまた別の機会に。
今回ちょっと進化したおみくじはコチラからできます。暇つぶしにでもどうぞ。(1秒で終わるけどｗ)

じゃあまたね！



今日のポイント
・buttonもcreateElemntでcreateできる。
　(基本的にHTMLのタグ類はcreateできるっぽい)
・textContentは指定した要素に応じた部分に文字列を出力してくれる
・視野は広く画面の全体を見渡す

この記事が気に入ったらサポートをしてみませんか？