質問編集履歴
3
ソースコードの追加 環境公開
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
addEventListenerでエラーがでる
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
startを押してstopを押したら経過時間が表示されるようにしたいです。
|
|
3
3
|
何卒ご教授お願いします。
|
|
4
4
|
```javascript
|
|
5
|
-
(function()
|
|
5
|
+
(function(){
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
8
|
var start = document.getElementById('start');
|
|
@@ -10,21 +10,32 @@
|
|
|
10
10
|
var result = document.getElementById('result');
|
|
11
11
|
var startTime;
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
document.addEventListener("DOMContentLoaded", function(){
|
|
14
|
-
|
|
14
|
+
start.addEventListener('click',function(){
|
|
15
15
|
startTime = Date.now();
|
|
16
|
+
});
|
|
16
17
|
});
|
|
17
|
-
|
|
18
|
+
document.addEventListener("DOMContentLoaded", function(){
|
|
18
|
-
|
|
19
|
+
stop.addEventListener('click', function() {
|
|
19
20
|
var elapsedTime;
|
|
21
|
+
|
|
20
22
|
elapsedTime = (Date.now()-startTime)/1000;
|
|
21
|
-
result.textContent
|
|
23
|
+
result.textContent=elapsedTime.toFixed(3);
|
|
22
|
-
|
|
24
|
+
});
|
|
23
25
|
});
|
|
24
26
|
})();
|
|
25
|
-
|
|
26
27
|
```
|
|
27
28
|
```html
|
|
29
|
+
<!DOCTYPE html>
|
|
30
|
+
<html>
|
|
31
|
+
<head>
|
|
32
|
+
<meta charset="utf-8" />
|
|
33
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
34
|
+
<title>5 second</title>
|
|
35
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
36
|
+
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/>
|
|
37
|
+
<script src="js/main.js"></script>
|
|
38
|
+
</head>
|
|
28
39
|
<body>
|
|
29
40
|
<div class ="container">
|
|
30
41
|
<div id="target">5.000</div>
|
|
@@ -36,7 +47,44 @@
|
|
|
36
47
|
</div>
|
|
37
48
|
|
|
38
49
|
</body>
|
|
50
|
+
</html>
|
|
39
51
|
```
|
|
52
|
+
```css
|
|
53
|
+
.container{
|
|
54
|
+
font-family: 'Courier New', sans-serif;
|
|
55
|
+
width: 300px;
|
|
56
|
+
margin: 30px auto 0;
|
|
57
|
+
text-align: center;
|
|
58
|
+
font-weight: bold;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#target, #result{
|
|
62
|
+
font-size: 32px;
|
|
63
|
+
margin-bottom: 15px;
|
|
64
|
+
background: #ccc;
|
|
65
|
+
height: 60px;
|
|
66
|
+
line-height: 60px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
#start{
|
|
70
|
+
float:left;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
#stop{
|
|
74
|
+
float:right;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
#start,#stop{
|
|
78
|
+
cursor:pointer;
|
|
79
|
+
font-size: 18px;
|
|
80
|
+
width:145px;
|
|
81
|
+
background: #eee;
|
|
82
|
+
height: 40px;
|
|
83
|
+
line-height: 40px;
|
|
84
|
+
box-shadow: 0 6px 0 #ccc;
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
OSはWindows
|
|
40
88
|
環境はchrome,Edgeなどで実行していますが、「 start.addEventListener('click', function() {」この行で同じエラーが出ます。
|
|
41
89
|
|
|
42
90
|
開発ツールはVisual Studio Codeを使用しています。
|
2
開発環境とエラー箇所
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -36,4 +36,7 @@
|
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
38
|
</body>
|
|
39
|
-
```
|
|
39
|
+
```
|
|
40
|
+
環境はchrome,Edgeなどで実行していますが、「 start.addEventListener('click', function() {」この行で同じエラーが出ます。
|
|
41
|
+
|
|
42
|
+
開発ツールはVisual Studio Codeを使用しています。
|
1
resultに関して1行抜けてたのでたしておきます。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
stop.addEventListener('click', function() {
|
|
19
19
|
var elapsedTime;
|
|
20
20
|
elapsedTime = (Date.now()-startTime)/1000;
|
|
21
|
+
result.textContent = elaspsedTime;
|
|
21
22
|
|
|
22
23
|
});
|
|
23
24
|
})();
|