はじめに
HTML、CSS、JavaScriptのDOM操作までを学習した初心者が、アウトプットのために一から作成してみました。
（間違いなどありましたら、ご指摘いただけると幸いです！）
できあがったもの
機能
- プラスボタンを押すとカウントアップ
- マイナスボタンを押すとカウントダウン
- RESETボタンでカウントが0になる
- マイナスボタンを押し続けても0以下にはならない
HTMLとCSSを記述する
HTML
<body><divclass="container"><divclass="field"><buttonclass="button"id="down">－</button><inputtype="text"value="0"class="inputtext"id="textbox"><buttonclass="button"id="up">＋</button></div> <buttonclass="button resetbtn"id="reset">RESET</button></div><script src="main.js"></script></body>
マイナスボタンと数字が表示されるカウンターとプラスボタン、
そしてリセットボタンの4つの構成です。
最後にJavaScriptの読み込みをしています。
CSS
body{margin:0;width:100%;}.container{width:300px;margin:200pxauto0;}.field{display:flex;}.inputtext{color:rgba(43,32,32,0.76);font-size:18px;border-left:0;border-right:0;width:80px;line-height:3rem;text-align:center;border:1pxsolid#D7DBDD;padding:010px;}.button{color:rgba(43,32,32,0.76);font-size:18px;cursor:pointer;padding:5px25px;background-color:white;border:1pxsolid#D7DBDD;border-radius:0;outline:0;}.resetbtn{margin:20px0065px;}
ショッピングサイトによくある商品数を変更するようなボタンを意識しました。
JavaScriptを記述する
(()=>{//HTMLのid値を使って以下のDOM要素を取得constdownbutton=document.getElementById('down');constupbutton=document.getElementById('up');consttext=document.getElementById('textbox');constreset=document.getElementById('reset');//ボタンが押されたらカウント減downbutton.addEventListener('click',(event)=>{//0以下にはならないようにするif(text.value>=1){text.value--;}});//ボタンが押されたらカウント増upbutton.addEventListener('click',(event)=>{text.value++;})//ボタンが押されたら0に戻るreset.addEventListener('click',(event)=>{text.value='0';})})();詳しく説明
(()=>{constdownbutton=document.getElementById('down');constupbutton=document.getElementById('up');consttext=document.getElementById('textbox');constreset=document.getElementById('reset');まず最初にDOM操作に必要なIdを取得します
今回必要なのは
- マイナスボタン→buttonタグのId
down - プラスボタン→buttonタグのId
up - 数字が表示されるカウンター部分→inputタグのId
textbox - リセットボタン→buttonタグのId
reset
なので、この４つを取得しました。
補足
一番上にある (() => {これは即時関数といいます
上部分だけピックアップしてますが、全体で見ると
(()=>{console.log('実行する内容');})();このような形で使われています。
上記はアロー関数を使っており、functionだと以下のようになります。していることは同じです。
(function(){console.log('実行する内容');})();これをすることで、関数の定義と実行が同時に行えるのと
スコープ範囲を限定するという意味があります。
downbutton.addEventListener('click',(event)=>{if(text.value>=1){text.value--;}});addEventListenerでdownbuttonをクリックしたときの挙動を設定します。
処理内容は、text.valueでカウンターに表示される数字の値を取得して、
その値が1以上のときのみカウントダウンする とします。
upbutton.addEventListener('click',(event)=>{text.value++;})reset.addEventListener('click',(event)=>{text.value='0';})プラスボタンとRESETボタンも同様に設定します。
以上で完成です！
さいごに
完成してみると説明する部分もないくらい簡単な実装でしたが、１からつくることで記述したこと以上の学びがありました！
これからも色々アウトプットしていこうと思います。
読んでいただきありがとうございました！
参考にさせて頂いた記事: