html
1<!DOCTYPE html> 2<html lang="ja"> 3 4 <head> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="css/style.css"> 7 <title>commentform</title> 8 </head> 9 10 <body> 11 <div class="container"> 12 <textarea id="comment" placeholder="your comment here"></textarea> 13 <div class="btn">submit</div> 14 <p><span id="label"></span> characters left</p> 15 16 </div> 17 <script src="js/main.js"></script> 18 </body> 19</html>
javascript
1(function(){ 2 'use strict'; 3 4 var comment= document.getElementById('comment'); 5 var label= document.getElementById('label'); 6 7var LIMIT=20; 8 9 label.innerHTML=LIMIT; 10 11 comment.addEventListener('keyup',function(){ 12 13 comment.addEventListener('keyup',function(){ 14 var remaining=LIMIT-this.value.length; 15 label.innerHTML = remaining; 16 }); 17})();
最後のところ、
var remaining=LIMIT-this.value.length;
label.innerHTML = remaining;
ではなく、単純に、
label.innnerHTML=LIMIT - this.value.length;
だとうまく動作しません。
なぜでしょうか?変数remainingがなぜ必要なのかわかりません。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。