入力した文字数を表示する

コード
```<!DOCTYPE html>
<html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>Hello!</title>
    <style>
        body{ font-size:14pt; font-weight:plain; }
        h1{ color:white;padding:5px; font-size:24pt;background-color:red; }
        </style>
    <script>
        function clickNow(){
        var input1 = document.querySelector('#input1');
        var value = input1.value;
        var msg = document.querySelector('#msg');
        }
        </script>
    </head>
    <body>
    <h1 id="title">Hello!</h1>
    <p id="msg">ID？</p>
        <input type="text" id="input1">
        <p id="msg">パスワードは？</p>
        <input type="password" size="12">
    <button onclick="clickNow();">Click</button>
    </body>
</html>

IDとパスワードを入力したとき文字数を表示するには
lengthというのをどうやって使えばいいんですか？？

kei344

2016/12/15 12:59

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

テキストが入力されたときに何かをするためにはonkeyup属性を使います。
querySelectorを使って入力された文字列の文字数を取得して、#idと#passwordに代入しています。もうちょっと詳しいことは以下のソースコードに書いてあるのでぜひ参考にしてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Hello!</title>
6    <style>
7        body {
8            font-size: 14pt;
9            font-weight: normal; /* plainというのは聞いたことがないのでnormalに変更 */
10        }
11
12        h1 {
13            color: white;
14            padding: 5px;
15            font-size: 24pt;
16            background-color: red;
17        }
18    </style>
19    <script>
20        function change_text() {
21            var get_input_text1 = document.querySelector("#input_text1").value.length;//input_text1に入力された文字列(value)の長さ(length)を取得
22            var get_input_text2 = document.querySelector("#input_text2").value.length;//input_text2に入力された文字列(value)の長さ(length)を取得
23            document.getElementById("id").innerText = get_input_text1;//get_input_text1で取得した数値を#idに代入。このとき、querySelectorと違いシャープ(#)は省略する。
24            document.getElementById("password").innerText = get_input_text2;//get_input_text2で取得した数値を#passwordに代入。このとき、querySelectorと違いシャープ(#)は省略する。
25        }
26    </script>
27</head>
28<body>
29<h1 id="title">Hello!</h1>
30<p id="id">ID？</p>
31<input type="text" id="input_text1" onkeyup="change_text();">
32<p id="password">パスワードは？</p>
33<input type="password" id="input_text2" onkeyup="change_text();">
34</body>
35</html>