コード
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div id="deltadrive">
key-number
</div>
<body>
<script>
function delta(e) {
let vari = String(e.keyCode);
let ele = document.getElementById("deltadrive");
ele.textContent += vari + " ";
}
window.addEventListener("keydown", delta);
</script>
</body>
</html>解説
getElementById関数で要素にアクセス
これを使って、要素オブジェクトを取得している。
let ele = document.getElementById(“deltadrive”);
要素オブジェクトを取得したら、プロパティにアクセスして書きかえれば良い。
ele.textContent += vari + ” “;
ここでは、追記していく形で書き換えている。
文字列型の結合
＋演算子で結合できる。
結合するために、String関数で、number型をString型に変換している。
let vari = String(e.keyCode);
ちなみに、String型のコンストラクタを使った場合と、Stirng関数を使った場合では、異なる結果が返ってくるので注意。
結論から言うとString型のコンストラクタはほぼ使う場面がない。
イベントリスナーの設定
window全体のオブジェクトのメソッドとして、設定する
window.addEventListener(“keydown”, delta);
addEventListenerメソッドは、第一引数がイベントの種類を表す文字列で、第二引数がその時に呼ばれる関数(コールバック関数と呼ばれれる)である。