フロントエンドブログ

Web制作で役立つフロントエンドの知識を発信しています!

【JavaScript】打った文字を画面に出力してみよう

 

今日は実際にキーボードで打った文字を画面に出力するプログラミングをご紹介します。まずHTMLファイルをご用意ください\(^o^)/

 

※コピペしてHTMLファイルに貼り付けてください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>タイピング</title>
</head>

<body>
<div id="target"></div>
</body>
</html>
これでHTMLファイルは完了です。
次にbodyの閉じタグ前にscriptタグを挿入します。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>タイピング</title>
</head>

<body>
<div id="target"></div>
<script></script>
</body>
</html>
これで用意は整いました。scriptタグの中へどんどん書いていきましょう!
 
まずは文字を出力する先の要素を取得します\(^o^)/
const target = document.getElementById("target");
id属性の取得は主にgetElementByIdを使います。大文字と小文字が区別されるので気をつけましょう。
const pool = ;
let i = 0;
続いて打ったキーの値を保存する配列とキーを打つごとにカウントするための変数をiを用意します。
document.addEventListener("keydown", function (e) {
pool.push(e.key);
target.insertAdjacentText("beforeend", pool[i]);
console.log(pool);
i++;
});
ここから本題です。今回はキーを打つというイベントを発火させるためにaddEventListenerを使います。第一引数に今回はキーを押したときに発火させる"keydown"を入れます。function()の中のeはイベントの情報が格納されているので打ったキーの値はe.keyで取り出せます。
そして出力先のtargetに対してinsertAdjacentTextメソッドを使って配列の中身を追加します。このときにインクリメントで順に配列の配列のtargetに出力していきます。
以上簡単ですが文字出力のプログラムでした(^^)
'beforeend'の解説
※完成版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>タイピング</title>
</head>

<body>
<div id="target"></div>
<script>
const target = document.getElementById("target");
const pool = ;
let i = 0;
document.addEventListener("keydown", function (e) {
pool.push(e.key);
target.insertAdjacentText("beforeend", pool[i]);
console.log(pool);
i++;
});
</script>
</body>
</html>
※完成版のコード
 

継続は力なり