javascriptが実行されない

ドットインストールの動画を見ながら割り勘電卓というアプリを作成中です。
html、CSSは問題無いのですがjavascriptが機能しません。

どこがおかしいかチェックしてもらえませんか。
よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>**</title>
6    <link rel="stylesheet" href="style.css">
7  </head>
8
9  <body>
10    <div class="container">
11      <div class="input-area">
12        <input type="text" id="price" placeholder="金額">
13        <input type="text" id="num" placeholder="人数">
14
15        <select id="unit">
16          <option value="10">10円単位</option>
17          <option value="100" selected>100円単位</option>
18          <option value="1000">1000円単位</option>
19        </select>
20        <div id="btn">計算</div>
21    </div>
22
23    <div class="result-area">
24      <p　id="result">ここに結果を表示します</p>
25      <div id="reset">もう一度計算する？</div>
26    </div>
27    <script src="main.js"></script>
28  </body>
29
30</html>
31

CSS
1body{
2  background: #ccc;
3  font-size:16px;
4  font-family: Arial,sans-serif;
5}
6
7
8.container{
9  width:600px;
10  margin:25px auto;
11}
12
13
14#price,#num,#unit{
15  font-size:14px;
16  box-sizing: border-box;
17  padding:10px;
18  height:40px;
19
20  border-radius: 5px;
21  border:none;
22  margin-right: 10px;
23
24}
25
26#price{
27  width:140px;
28}
29
30#num.#unit{
31  width:110px;
32}
33
34#btn{
35  cursor:pointer;
36  display:inline-block;
37  box-sizing: border-box;
38  width:110px;
39  height:40px;
40  padding:10px;
41  background: #3897fd;
42  border-radius: 5px;
43  font-size: 14px;
44  text-align: center;
45  color:#fff;
46}
47
48.input-area{
49  font-size: 0px;
50  margin-bottom: 20px;
51}
52
53.result-area{
54  background: #f8f8f8;
55  padding:10px;
56  height:130px;
57  border-radius: 5px;
58  position: relative;
59}
60
61#result{
62  margin:0px;
63}
64
65#reset{
66  text-decoration:underline;
67  cursor: pointer;
68  position: absolute;
69  bottom: 10px;
70  right: 10px;
71}
72

javascript
1  var price=document.getElementbyId('price');
2  var num=document.getElementbyId('num');
3  var unit=document.getElementbyId('unit');
4  var btn=document.getElementbyId('btn');
5  var result=document.getElementbyId('result');
6  var reset=document.getElementbyId('reset');
7
8
9  btn.addEventLintener('click',function(){
10    var payless;
11    var payMore;
12    var short;
13    var over;
14    var str;
15
16    payless=Math.floor(price.value/num.value/unit.value)*100;
17    short=price.value-(payless*num.value);
18    payMore=Math.ceil(price.value/num.value/unit.value)*100;
19    over=Math.abs(price.value-(payMore*num.value));
20
21    if(over===0&&short===0){
22      str='一人'+(price.value/num.value)+'ちょうどです';
23    }else{
24      str=
25        '一人'+payless+'円だと'+short+'円足りません'+
26        '一人'+payMore+'円だと'+over+'円多いです';
27    }
28
29    result.textContent=str;
30
31  });
32

defghi1977

2018/04/18 12:09

https://teratail.com/help/question-tips

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

回答3件

ベストアンサー

<p　id="result">が全角になっており、result変数がnullになっています。
getElementbyIdではなくgetElementByIdです。
addEventLintenerではなくaddEventListenerです。

コーディング用のエディタを導入してHTML用のLinterを入れれば、リアルタイムでこういったタイプミスを検知してくれます。効率的になるので試してみてください。

投稿2018/04/18 12:40

Udomomo

総合スコア1524

nonnon8.

2018/04/18 13:09

丁寧にありがとうございます。タイプミスで申し訳ないです。

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

HTML
1<p　id="result">
2  ↓ 全角スペースになっているので半角スペースする
3<p id="result">
4

JavaScript
1document.addEventListener("DOMContentLoaded", function() {
2  var price=document.getElementById('price');
3  var num=document.getElementById('num');
4  var unit=document.getElementById('unit');
5  var btn=document.getElementById('btn');
6  var result=document.getElementById('result');
7  var reset=document.getElementById('reset');
8
9
10  btn.addEventListener('click',function(){
11    var payless;
12    var payMore;
13    var short;
14    var over;
15    var str;
16
17    payless=Math.floor(price.value/num.value/unit.value)*100;
18    short=price.value-(payless*num.value);
19    payMore=Math.ceil(price.value/num.value/unit.value)*100;
20    over=Math.abs(price.value-(payMore*num.value));
21
22    if(over===0&&short===0){
23      str='一人'+(price.value/num.value)+'ちょうどです';
24    }else{
25      str=
26        '一人'+payless+'円だと'+short+'円足りません'+
27        '一人'+payMore+'円だと'+over+'円多いです';
28    }
29
30    result.textContent=str;
31
32  });
33
34});
35
36  
37