【初心者】クリックすると数字が増減するカウンター #JavaScript - Qiita
分析結果
- カテゴリ
- AI
- 重要度
- 54
- トレンドスコア
- 18
- 要約
- 【初心者】クリックすると数字が増減するカウンター #JavaScript - Qiita 53 いいねしたユーザー一覧へ移動 40 X（Twitter）でシェアする Facebookでシェアする はてなブックマークに追加する more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete info この記事は最終
- キーワード
【初心者】クリックすると数字が増減するカウンター #JavaScript - Qiita 53 いいねしたユーザー一覧へ移動 40 X（Twitter）でシェアする Facebookでシェアする はてなブックマークに追加する more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete info この記事は最終更新日から5年以上が経過しています。 @ ki01chi ( chisato ) 【初心者】クリックすると数字が増減するカウンター HTML CSS JavaScript 53 最終更新日 2020年10月05日 投稿日 2020年10月04日 2020.10.05 [修正] 修正前： text.value = '0'; 数値として扱わないといけないところを、''をつけて文字列としてしまっていたので修正しました。 はじめに HTML、CSS、JavaScriptのDOM操作までを学習した初心者が、アウトプットのために一から作成してみました。 （間違いなどありましたら、ご指摘いただけると幸いです！） できあがったもの 機能 プラスボタンを押すとカウントアップ マイナスボタンを押すとカウントダウン RESETボタンでカウントが0になる マイナスボタンを押し続けても0以下にはならない HTMLとCSSを記述する HTML <body> <div class= "container" > <div class= "field" > <button class= "button" id= "down" > － </button> <input type= "text" value= "0" class= "inputtext" id= "textbox" > <button class= "button" id= "up" > ＋ </button> </div> <button class= "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 : 200px auto 0 ; } .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 : 1px solid #D7DBDD ; padding : 0 10px ; } .button { color : rgba ( 43 , 32 , 32 , 0.76 ) ; font-size : 18px ; cursor : pointer ; padding : 5px 25px ; background-color : white ; border : 1px solid #D7DBDD ; border-radius : 0 ; outline : 0 ; } .resetbtn { margin : 20px 0 0 65px ; } ショッピングサイトによくある商品数を変更するようなボタンを意識しました。 JavaScriptを記述する (() => { //HTMLのid値を使って以下のDOM要素を取得 const downbutton = document . getElementById ( ' down ' ); const upbutton = document . getElementById ( ' up ' ); const text = document . getElementById ( ' textbox ' ); const reset = 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 ; }) })(); 詳しく説明 DOM操作に必要なIdを取得 (() => { const downbutton = document . getElementById ( ' down ' ); const upbutton = document . getElementById ( ' up ' ); const text = document . getElementById ( ' textbox ' ); const reset = document . getElementById ( ' reset ' ); まず最初にDOM操作に必要なIdを取得します 今回必要なのは マイナスボタン→buttonタグのId down プラスボタン→buttonタグのId up 数字が表示されるカウンター部分→inputタグのId textbox リセットボタン→buttonタグのId reset なので、この４つを取得しました。 補足 一番上にある (() => { これは 即時関数 といいます 上部分だけピックアップしてますが、全体で見ると アロー関数を使ったとき (() => { console . log ( ' 実行する内容 ' ); })(); このような形で使われています。 上記はアロー関数を使っており、functionだと以下のようになります。していることは同じです。 function関数を使ったとき ( function () { console . log ( ' 実行する内容 ' ); })(); これをすることで、関数の定義と実行が同時に行えるのと スコープ範囲を限定するという意味があります。 参考： JavaScriptで即時関数を使う理由 マイナスボタンをクリックしたときの挙動（DOM操作） downbutton . addEventListener ( ' click ' , ( event ) => { if ( text . value >= 1 ) { text . value -- ; } }); addEventListener で downbutton をクリックしたときの挙動を設定します。 処理内容は、 text.value でカウンターに表示される数字の値を取得して、 その値が1以上のときのみカウントダウンする とします。 プラスボタンをクリックしたときの挙動(DOM操作) upbutton . addEventListener ( ' click ' , ( event ) => { text . value ++ ; }) RESETボタンをクリックしたときの挙動（DOM操作） reset . addEventListener ( ' click ' , ( event ) => { text . value = 0 ; }) プラスボタンとRESETボタンも同様に設定します。 以上で完成です！ さいごに 完成してみると説明する部分もないくらい簡単な実装でしたが、１からつくることで記述したこと以上の学びがありました！ これからも色々アウトプットしていこうと思います。 読んでいただきありがとうございました！ 参考にさせて頂いた記事: [DOM操作を使った簡易的なtodoリストアプリを作ってみた] ( https://qiita.com/atlansien/items/c582fe2c6d5af943e55c ) [JavaScriptで「コマ移動ゲーム（横移動のみ）」を作ってみた] ( https://qiita.com/yuya_yuzen/items/9f8642e21f9b4f67610c ) 53 いいねしたユーザー一覧へ移動 40 comment 0 コメント一覧へ移動 新規登録して、もっと便利にQiitaを使ってみよう あなたにマッチした記事をお届けします 便利な情報をあとで効率的に読み返せます ダークテーマを利用できます ログインすると使える機能について 新規登録 ログイン 53 いいねしたユーザー一覧へ移動 40 more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete