javascript onkeydownで関数を起動させる方法（テキストフォームの操作）

こんにちは。初心者です。
よろしくお願いします。

javascriptで、フォーム（テキストボックスとボタン）を用いたプログラムを書いているのですが、今現在はボタン（id="calbtn"）で関数( calreq())を呼び出したのち、そのテキストボックスに入力された内容を処理しております。

今、新たに、ボタンだけではなく、Enterキーが押下されても関数が呼び出されるようにしたいと思い、onkeydownを用いて関数retu()を起動させるような、下記コードを書いてみましたが、上手く動作しませんでした。
（従来の通り、ボタンでは関数calreq()が起動できます）

どなたか、ボタンでも、Enterキーでも、関数が起動できる方法を教えて頂けないでしょうか？

ソースコード：

###html (<head>は省略）

<body>
	<div id="formarea">
		<form name="frm">
		<label>上限カロリーを設定して下さい<input type="text" name="maxcal" value=""></label>
		<input type="button" value="スタート" id="calbtn">
		<input type="button" value="クリア" id="clrbtn">
		</form>
	</div>
	
	<div id="asaarea"></div>
	<div id="hiruarea"></div>
	<div id="yoruarea"></div>
	<div id="sumarea"></div>
</body>

###javascript (一部省略）

function start(){
  ～ 省略 ～
}

var ncal;

function calreq(){
	ncal=document.frm.maxcal.value;
	if (ncal==""){
		alert("数値を入力してください");
	} else {
		start();
	}
}

function clr(){
	document.frm.maxcal.value="";
}

function retu(){
	if (event.keyCode == 13){
		calreq();
	}
}

window.onload = function (){
document.getElementById("calbtn").onclick = calreq;
document.getElementById("clrbtn").onclick = clr;
document.onkeydown = retu;
};

kei344

2017/08/26 06:46

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

退会済みユーザー

2017/08/26 07:00

メールありがとうございます。失礼しました。ただいま、修正しました。

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

回答1件

ベストアンサー

以下のように行うことができると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div id="formarea">
9    <form name="frm">
10        <label>上限カロリーを設定して下さい
11            <input type="text" name="maxcal" value="">
12        </label>
13        <input type="button" value="スタート" id="calbtn">
14        <input type="button" value="クリア" id="clrbtn">
15    </form>
16</div>
17
18<div id="asaarea"></div>
19<div id="hiruarea"></div>
20<div id="yoruarea"></div>
21<div id="sumarea"></div>
22<script>
23    var ncal;
24
25    function start() { // 適当なものを用意。
26        alert(document.querySelector("input[name='maxcal']").value);
27    }
28
29    function calreq() {
30        ncal = document.frm.maxcal.value;
31        if (ncal === "") {
32            alert("数値を入力してください");
33        } else {
34            start();
35        }
36    }
37
38    function clr() {
39        document.frm.maxcal.value = "";
40    }
41
42    function retu(e) { // 修正
43        if (e.keyCode === 13) {
44            calreq();
45            return false; // 追加。
46        }
47    }
48
49    window.onload = function () {
50        document.getElementById("calbtn").onclick = calreq;
51        document.getElementById("clrbtn").onclick = clr;
52        document.querySelector("input[name='maxcal']").onkeydown = retu;
53    };
54</script>
55</body>
56</html>