前提・実現したいこと
ドッとインストールの割り勘電卓をつくってます。
エラーが発生したのですが何が間違ってるかわかりません
よろしくお願いします。
発生している問題・エラーメッセージ
エラーメッセージ
Uncaught TypeError: Cannot set property 'textContent' of null
at HTMLDivElement.<anonymous> (main.js:28)
該当のソースコード
コード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>割り勘電卓</title> <link rel="stylesheet" href="css/style.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">10円単位</option> <option value="100" selected>100円単位</option> <option value="1000">1000円単位</option> </select> <div id="btn">計算</div> <div class="result-area"> <p id="result">ここに結果を表示します</p> <div id="reset">もう一度計算するか? </div> </div> </div> </div> <script src="js/main.js"></script> </body> </html>
javascript
1(function(){ 2'use strict'; 3var price =document.getElementById('price'); 4var num =document.getElementById('num'); 5var unit =document.getElementById('unit'); 6var btn =document.getElementById('btn'); 7var result =document.getElementById('result'); 8var reset =document.getElementById('reset'); 9 10btn.addEventListener('click',function(){ 11 var payLess; 12 var short; 13 var payMore; 14 var over; 15 var str; 16//A.300(payless)...100(short)不足 17//B.400(payMore)...200余り(over)余り 18//payLess=1000/3; //333.3333 19//payLess=1000/3/100;/3.333 20payLess=Math.floor(price.value/num.value/unit.value)*unit.value;//300 21short= price.value - (payLess * num.value); //100 22 23payMore=Math.ceil(price.value/num.value/unit.value)*unit.value;//400 24over = Math.abs(price.value-(payMore*num.value));//200 25str= 26'一人'+payLess+'円だと'+short+'円足りません'+ 27'一人'+payMore+'円だと'+over+'円余ります'; 28result.textContent = str; 29 30}); 31 32 33})();
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/25 14:51