43455


プログラミング初心者です。ドットインストールで割り勘電卓を作っています。  
（<https://dotinstall.com/lessons/go_dutch_js_v3/42808>）  
下記プログラム実行したところ、

一人NaN円だとNaN円足りません。 一人NaN円だとNaN円余ります。

と表示され、payLess、short,payMore,overの変数が反映されません。どこが間違っているのか指摘して頂けないでしょうか。

[code]

    (function (){
     'usr strict';
    
    
      var price = document.getElementById('price');
      var num = document.getElementById('num');
      var unit = document.getElementById('unit');
      var btn = document.getElementById('btn');
      var result = document.getElementById('result');
      var reset = document.getElementById('reset');
    
      
    
      btn.addEventListener('click', function() {
       
      var payLess;
      var short;
      var payMore;
      var over;
      var str;
       
      payLess = Math.floor(price.value / num.value / unit.value) * unit.value;
      short = price.value - (payLess * num.value);
      payMore = Math.ceil(price.value / num.value /unit.value)* unit.value;
      over = Math.abs(price.value - (payMore * num.value));
      str =
         ' 一人' + payLess + '円だと' + short + '円足りません。' +
          ' 一人' + payMore + '円だと' + over + '円余ります。';
        result.textContent = str;
      });
    })();
[/code]

[code]

    body {
     background: #ccc;
     font-size: 16px;
     font-family: Arial, sans-serif;
    }
    
    .container {
     width: 500px;
     margin: 25px auto;
    }
    
    #price,
    #num,
    #unit {
     font-size: 14px;
     box-sizing: border-box;
     padding: 10px;
     height: 40px;
     border-radius: 5px;
     border: none;
     margin-right: 10px;
    
    }
    
    #price {
     width: 140px;
    }
    
    #unit,
    #num {
     width: 110px;
    }
    
    #btn{
     cursor: pointer;
     display: inline-block;
     box-sizing: border-box;
     width: : 110px;
     height: 40px;
     padding: 10px;
     background: #3897fd;
     font-size: 14px;
     text-align: : center;
     color: #fff;
    
    }
    .input-area {
     font-size:0;
     margin-bottom: 10px;
    }
    
    .result-area {
     background: #f8f8f8;
     padding: 10px;
     height:130px;
     border-radius: 5px;
     position: relative;
    }
    
    #result {
     margin: 0px;
    }
    
    #reset {
     text-decoration: underline;
     cursor: pointer;
     position: absolute;
     bottom: 10px;
     right: 10px;
       }
[/code]

[code]

    <!DOCTYPE html>
    <html lang='ja'>
    <head>
    <meta charaset ='utf-8'>
    <title>割り勘電卓</title>
    <link rel='stylesheet' href="css/styles.css">
    
    </head>
    
    <body>
    
    <div class='container'>
     <div class = 'input-area'>
      <input type='text' id='price' placeholder="金額"> 
      <input type='text' id='num' placeholder="人数">
      <select id='unit'>
       <option value "10">１０円単位</option>
       <option value "100" selected>１００円単位</option> <!-- selected is deafult   --> 
       <option value "1000">１０００円単位</option>
      </select>
            <div id='btn'>計算</div>
        </div>
        <div class='result-area'>
        <p id='result'>ここに結果を表示します</p>
        <div id='reset'>もういちど計算する？</div>
       </div>
    </div>
    <script src='js/main.js'></script>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2018-04-21T07:05:17.553
43452
2018-04-21T08:32:16.287
2018-04-21T07:27:18.727
28259
28259
question
javascript html
変数が反映されない。（プログラミング初心者です）

[code]

        <option value "10">１０円単位</option>
        <option value "100" selected>１００円単位</option> <!-- selected is deafult   --> 
        <option value "1000">１０００円単位</option>
    
[/code]

`value` と `"` の間に `=` がないため、何を選んでも `unit.value` が空文字列になっています。


CC BY-SA 3.0
2018-04-21T08:32:16.287
43455
2018-04-21T08:32:16.287
3475
43452
answer