僕が自分で便利だなーと思っている機能なんですが、皆さん1回は見たことがあると思います！
せっかくコードを書いたので問題にしちゃいたいと思います！ HTMLとJSのコードを乗っけるのでどんな機能なのかコメント欄に書いてもらえればと思います！！ ていうか文字でわかっちゃうかもしれないですが笑
後、実際に動かしてしまうと一瞬でわかるので答えは最後に見て下さい笑
という事で、皆さんお暇があればやってみて下さい！！
後今回僕がハマったaddEventListerに引数を渡す方法をシェアしときますね！
【JavaScript】addEventListenerで関数に引数をわたす
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> | |
| <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="./index.css"> | |
| </head> | |
| <body> | |
| <div class="form"> | |
| <label for="text">comment</label> | |
| <input type="text" id="input" class="form-control"> | |
| </div> | |
| <h2 id="input-counter">0</h2> | |
| <a href="#" id="submit-btn"class="btn btn-raised btn-danger">登録</a> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> | |
| <script src="./index.js"></script> | |
| </body> | |
| </html> |
| const input = document.querySelector('#input'); | |
| const inputCounter = document.querySelector('#input-counter'); | |
| const submitBtn = document.querySelector('#submit-btn'); | |
| function countLength(limit) { | |
| var count = input.value.length | |
| if (count <= this.limit) { | |
| inputCounter.innerHTML = count | |
| submitBtn.classList.remove('disabled') | |
| } else { | |
| inputCounter.innerHTML = `${this.limit}文字以上は入力できません`; | |
| inputCounter.classList.add('red'); | |
| submitBtn.classList.add('disabled') | |
| } | |
| } | |
| // input.addEventListener('keyup', count_length(50)) | |
| // これは動かない | |
| input.addEventListener('keyup', {limit: 50, handleEvent: countLength}) | |
| // これは動く |
| .red { | |
| color: red; | |
| } |