ドットインストールの動画を見ながら割り勘電卓というアプリを作成中です。
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
https://teratail.com/help/question-tips
回答3件
あなたの回答
tips
プレビュー