正解時にページが勝手にリロードされてしまう。

前提・実現したいこと

1011から13を順番に引いていく暗算課題を作成しています。

実現したいこと
・エンターキーを押すと正誤判定される。
・不正解時にはアラートが現れ、最初から計算しなければならない。
・正解時にはそのまま続けて計算する。（アラートは出さない）
・入力した文字は正解不正解に関係なくform2のテキストボックスに保持される

上記のように動かしたいのですが、
正解時に自動的にページがリロード？されてしまい、続けて計算することができず、form2のテキストボックスに入力された文字も消えてしまいます。

よろしくお願いいたします。

該当のソースコード

Javascript
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="utf-8">
5<title>心理学実験</title>
6<style type="text/css">
7*{
8text-align:center;
9}
10body{
11  background-color:#006ab6;
12}
13input[name="t1"]{
14  margin-top:200px;
15  width:200px;
16  height:100px;
17  font-size:50px;
18}
19input[type="button"]{
20  margin-top:100px;
21  width:100px;
22  height:50px;
23}
24input[name="t2"]{
25  color:green;
26  background-color:#006ab6;
27  border:none;
28  margin-top:200px;
29}
30input[type="sub"]{
31  width:100px;
32  height:30px;
33}
34form[name="form2"]{
35  margin-right:180px;
36}
37</style>
38</head>
39<body onload="disp()" onKeyPress="move(window.event.keyCode);check(window.event.keyCode);">
40<form name="form1">
41<input type="text" id="answer" name="t1">
42</form>
43<form name="form2">
44<br/>
45<input type="text" name="t2">
46<input type="button" value="終了する" onclick="fin();">
47</form>
48<script type="text/javascript">
49
50const start = 1011;
51const unit = 13;
52var cur = start;
53
54document.getElementById("answer").focus();
55
56function focus(){
57  var element = document.getElementById("answer");
58  element.focus();
59}
60
61function move(key){
62if(key == 13){
63document.form2.t2.value = document.form1.t1.value + document.form2.t2.value;
64}
65}
66
67//回答
68function check(key){
69if(key == 13){
70  if(document.getElementById("answer").value == (cur - unit)){
71    cur -= unit;  
72    //次の問題に回答する
73    document.getElementById("answer").value = "";
74    focus();
75  } else {
76    alert("不正解です。もう一度最初から計算してください。");
77    //最初の問題に戻る
78    cur = start;
79    document.getElementById("answer").value = "";
80    focus();
81  }
82}
83}
84
85var alertmsg=function(){
86  cur = start;
87  alert("3分経過しました。もう一度最初から計算してください。");
88}
89setTimeout(alertmsg,180000);
90
91var alertmsg2=function(){
92  alert("５分経過しました。終了ボタンを押してください。");
93}
94setTimeout(alertmsg2,300000);
95
96function fin(){
97  location.href="index.html"
98}
99
100</script>
101</body>
102</html>

補足情報（FW/ツールのバージョンなど）

Microsoft Edge 44.17763.1.0を使用しています。
（chromeを使っても自動的にリロードされてしまいました。）

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

回答1件

ベストアンサー

入力欄が一つだけのフォームはenterキーでsubmitされるみたいです。
下記を試してみてはいかがでしょうか？

html
1<form name="form1" onsubmit="return false;">

投稿2019/06/22 08:57

fumito_94

総合スコア679

moka_

2019/06/22 13:55

そうなんですね。試してみたところうまくいきました。ありがとうございました！

fumito_94

2019/06/22 13:56

よかったです！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！