Q&A
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
・inputに文字列を入力、enterを押すと、次のinputがフォーカスされるようにしたい。
・以上の動作を実現させる前に、とりあえずinputにフォーカスしている状態で任意のキーを押すと、コンソールに'Key Down'と表示されるようにしようとした。
発生している問題・エラーメッセージ
何もキーを押していないのに、20回、コンソール上にメッセージが表示される。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Text Edit</title> 7 <link rel="stylesheet" href="styles.css"> 8</head> 9 10<body> 11 <div id="content"></div> 12 <script src="main.js"></script> 13</body> 14 15</html>
javascript
1'use strict'; 2 3function createInput(){ 4 const input = document.createElement('input'); 5 input.type = 'text'; 6 input.addEventListener('keydown', console.log('Key Down')) 7 document.getElementById('content').appendChild(input) 8} 9 10for(let i = 0; i < 20; i++){ 11 createInput(); 12}
試したこと
・イベントをclickやfocusに変えてみた。ページ再読み込みでcommand + rを押したことが関係するかと思って。
→イベントを変えても、ページを読み込んだ時点でメッセージが表示されている。
イベントが無視されているように思えてしまうが、解決方法が分からない。
・イベントハンドラ等、イベント関連の用語の意味を調べ直した。
→これはこれで勉強になったが、今回の問題は解決されず。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
addEventListenerの第2引数には、関数オブジェクトを指定してください。
JavaScript
1 input.addEventListener('keydown', function(event) { console.log('Key Down') });
JavaScript
1 input.addEventListener('keydown', event => console.log('Key Down'));
など。
その後、createInputを一度だけ呼び出せば、イベントリスナーが設定されて、inputに文字を入力するたびにconsole.logが呼ばれるようになります。
投稿2020/11/21 11:38
総合スコア11990
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/22 07:56