答えが表示されない。プログラムが機能しない。

このプログラムをATOMで作成しchroomeで実行したところ、正常に動きませんでした。
どこをどのように直せば正常に動くでしょうか？
出来るだけこのソースを変えずに可笑しい場所を教えていただけるとありがたいです。

html
1<!DOCTYPE html>
2<html>
3<title>javascript</title>
4
5<body>
6  <p>
7    <input type="number" id="number1" value="0" min=0 max=10>+
8    <input type="number" id="number2" value="0" min=0 max=10>=
9    <input type="number" id="resulut" value="0">
10    <input type="button" id="button" value="和">
11  </p>
12</body>
13<script>
14 button.addEventListener("click",function(e) {
15   e.preventDefault();
16  var number1 = document.getElementById("number1").value;
17  var number2 = document.getElementById("number2").value;
18  var button = document.getElementById("button");
19  var result = document.getElementById("result");
20  var sum = parseInt(number1, 10) + parseInt(number2, 10);
21  result.value = sum;
22 }
23</script>
24</html>
25

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

回答3件

ベストアンサー

HTML
1    <!--input type="number" id="resulut" value="0"-->
2    <input type="number" id="result" value="0">

HTML
1 }
2 ); // add.
3</script>

投稿2019/10/30 06:33

x_x

総合スコア13749

sabiki-taro

2019/10/31 09:19

回答ありがとうございました。とてもわかりやすかったです。

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

変数buttonの定義場所がおかしいです。

投稿2019/10/29 16:07

kei344

総合スコア69596

matobaa

2019/10/30 08:24

すみません横からですが教えてください。一見おかしくないように思えたのですが、なにかまずいところがあるのでしょうか。 MDNを探しているのですが、正しいという記載も、誤りという記載も、まだ見つけられておりません。

kei344

2019/10/30 09:47

var button = document.getElementById("button"); が button.addEventListener に登録される関数内に定義されているのは、意図的にそうしたのではないと思いました。HTMLで定義した idをそのまま変数として利用する習慣が無いので、私にとっては「おかしく」見えました。

matobaa

2019/10/30 11:23

仕様でなく習慣で、そう書くべきでないということですね、違和感なく理解できました。ありがとうございます。

sabiki-taro

2019/10/31 09:18

回答ありがとうございました。勉強になりました。

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

html
1<script>
2 button.addEventListener("click",function(e) {
3   e.preventDefault();
4  var number1 = document.getElementById("number1").value;
5  var number2 = document.getElementById("number2").value;
6  var button = document.getElementById("button");
7  var result = document.getElementById("result");
8  var sum = parseInt(number1, 10) + parseInt(number2, 10);
9  result.value = sum;
10 }
11</script>

↓

html
1<script>
2 var button = document.getElementById("button");
3 button.addEventListener("click",function(e) {
4   e.preventDefault();
5  var number1 = document.getElementById("number1").value;
6  var number2 = document.getElementById("number2").value;
7  var result = document.getElementById("result");
8  var sum = parseInt(number1, 10) + parseInt(number2, 10);
9  result.value = sum;
10 }
11</script>