inputに入力された文字列を、リアルタイムで取得したい

閲覧ありがとうございます。
inputに入力された文字列を、リアルタイムで取得したいです。

ドットインストールで、

「JavaScriptは全体を即時関数で囲いつつ、
use strictキーワードで厳密なエラーチェックをすることが推奨されている。」

と知ったので、それも盛り込もうとしていますが、
即時関数で囲うと、inputに入力された文字列を、リアルタイムで取得できなくなります。
何故でしょうか？

何か良い方法があれば教えていただきたいです。
よろしくお願い致します。

HTML
1<body>
2
3  <input type="text" id="inputText" placeholder="文字を入力してください" onkeyup="addValue()">
4
5  <div id="inputTextPv"></div>
6
7  <script>
8    (function () {
9      'use strict';
10
11      function addValue() {
12        const idname = "inputText";
13        const s = document.getElementById(idname).value;
14        const pvname = idname + "Pv";
15        document.getElementById(pvname).innerHTML = s;
16      }
17
18    })();
19  </script>
20</body>
21

【追記】
いただいたアドバイスを踏まえたものがこちらになります。
こんな感じでしょうか？

HTML
1<body>
2
3  <input type="text" id="inputText" placeholder="文字を入力してください">
4
5  <div id="inputTextPv"></div>
6
7  <script>
8    (function () {
9
10      'use strict';
11
12      var inputText = document.getElementById("inputText");
13
14      inputText.addEventListener('keyup', function() {
15        var s = inputText.value;
16        document.getElementById("inputTextPv").textContent = s;
17      }, false);
18      
19      
20    })();
21  </script>
22</body>
23

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

回答1件

ベストアンサー

addEventListenerを使いましょう。

【addEventListener()－JavaScript入門】
https://www.pazru.net/js/event/2.html

【EventTarget.addEventListener() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

【【JavaScript入門】addEventListener()によるイベント処理の使い方！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/57625

投稿2018/11/25 04:45

kei344

総合スコア69625

_sz

2018/11/25 06:22

早速のご回答ありがとうございます！いただいたアドバイスをコードに反映したものを、質問文に追記いたしました。使い方は合っていますでしょうか？直した方が良い箇所がありましたら、教えていただけますと幸いです。よろしくお願い致します。

kei344

2018/11/25 06:30

大丈夫だと思います。場合によっては「input」というイベントがあるので、調べてみてください。【イベントリファレンス | MDN】 https://developer.mozilla.org/ja/docs/Web/Events#Value_change_events 【JavaScriptでテキストが変更された瞬間を検出するために必要なイベントを調べた。 - Qiita】 https://qiita.com/saxxos/items/294b209fc6c7ecc07bd6 【inputイベントでフォーム入力値をリアルタイム取得できるよ。（あとjQuery例。） | Ginpen.com】 https://ginpen.com/2018/01/30/realtime-form-values/

_sz

2018/11/25 06:42

ありがとうございます！

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