前提・実現したいこと
プログラムを独学で勉強し始めて一カ月弱の初心者です。
現在HTML、JavaScriptで以下のような練習問題に取り掛かっています。
お店の人「お会計は○○○○円です」←クリックしたら
A君「僕は○○○○円持ってるよ」←この部分が表示される
B君「僕は○○○○円持ってるよ」←この部分が表示される
C君「僕は○○○○円持ってるよ」←この部分が表示される
『○君「じゃあ僕がおごるよ!」』あるいは、『○君○君「僕たちがおごるよ」』あるいは、『全員「割り勘だね」』あるいは、『全員「お金足りないね…」』←この部分が変化し表示される
お会計の合計金額とA君とB君とC君のそれそれの所持金を書き換えられるようにして、それぞれの所持金を比較して返答の表示が書き換わるプログラムを書く練習問題をやっているのですが、私の理解も追い付いていなく、上手く動かないため教えていただきたいです。
発生している問題・エラーメッセージ
JavaScript
1window.onload = function (){ 2 var test = document.getElementById("tes"); 3 test.addEventListener('click',push1, false); 4} 5function push1(){ 6var test1 = document.getElementById("test1"); 7var test2 = document.getElementById("test2"); 8var test3 = document.getElementById("test3"); 9var test4 = document.getElementById("test4"); 10var test5 = document.getElementById("test5"); 11var test6 = document.getElementById("test6"); 12var test7 = document.getElementById("test7"); 13var test8 = document.getElementById("test8"); 14var elem = document.getElementById("element"); 15 if(test2 + test4 < test7){ 16 elem.innerHTML = "二人「お金足りないね...」"; 17 console.log("二人「お金足りないね...」"); 18 }else if(test2 > test4){ 19 elem.innerHTML = "A君「じゃあ僕がおごるよ!」"; 20 console.log("A君「じゃあ僕がおごるよ!」"); 21 }else if(test2 < test4){ 22 elem.innerHTML = "B君「じゃあ僕がおごるよ!」"; 23 console.log("B君「じゃあ僕がおごるよ!」"); 24 25 }else{ 26 elem.innerHTML = "2人「割り勘にしよう!」"; 27 console.log("2人「割り勘にしよう!」"); 28 } 29}
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>JavaScriptの学習</title> 6</head> 7<body> 8<p> 9 <span id="test6">お店の人「お会計は</span> 10 <span id="test7">2000</span> 11 <span id="test8">円です」</span> 12 <input id="tes" type="button" value="お支払い" /> 13</p> 14<br> 15<p> 16 <span id="test1">A君「僕は</span> 17 <span id="test2">1000 18 <span id="test5">円持ってるよ」</span> 19<br> 20 <span id="test3">B君「僕は</span> 21 <span id="test4">5000 22 <span id="test5">円持ってるよ」</span> 23</p> 24<span id="element"></span> 25<script type="text/javascript" src="./js/if-kadai2.js"></script> 26</body> 27</html>
若干修正いたしました。
現時点でクリックしたときは答えが表示されるのですが、if文の条件定義が間違っていて、B君の方がたくさんお金を持っていても、割り勘にしようと出てしまいます。elseの割り勘にしようはなくてもいいのですが、どのようにifを直したら、しっかり条件定義出来て、クリックしたときに数字によって答えが変わるのでしょうか。
ここに質問するのが初めてで、不慣れで申し訳ないのですがよろしくお願いいたします。
該当のソースコード
HTML
<html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの学習</title> </head> <body> <p> <span id="test6">お店の人「お会計は</span> <span id="test7">2000</span> <span id="test8">円です」</span> <input id="tes" type="button" value="お支払い" /> </p> <br> <p> <span id="test1">A君「僕は</span> <input id="test2"></input> <span id="test5">円持ってるよ」</span> <br> <span id="test3">B君「僕は</span> <input id="test4"></input> <span id="test5">円持ってるよ」</span> </p> <input id="element" type="text" /> <script type="text/javascript" src="./js/if-kadai2.js"></script> </body> </html>
JavaScript
window.onload = function (){ var test = document.getElementById("tes"); test.addEventListener('click',push1, false); } function push1(){ var test1 = document.getElementById("test1"); var test2 = document.getElementById("test2"); var test3 = document.getElementById("test3"); var test4 = document.getElementById("test4"); var test5 = document.getElementById("test5"); var test6 = document.getElementById("test6"); var test7 = document.getElementById("test7"); var test8 = document.getElementById("test8"); var elem = document.getElementById("element"); if(test2 + test4 < test7){ document.getElementById("element"); elem.innerHTML = "二人「お金足りないね...」"; console.log("二人「お金足りないね...」"); }else if(test2 > test4){ document.getElementById("element"); elem.innerHTML = "A君「じゃあ僕がおごるよ!」"; console.log("A君「じゃあ僕がおごるよ!」"); }else if(test2 < test4){ document.getElementById("element"); elem.innerHTML = "B君「じゃあ僕がおごるよ!」"; console.log("B君「じゃあ僕がおごるよ!」"); }else{ document.getElementById("element"); elem.innerHTML = "2人「割り勘にしよう!」"; console.log("2人「割り勘にしよう!」"); } }
試したこと
色々試した結果何が正しくて、何が間違っているのかが分からなくなっている状況です。
クリックしても反応が無いのと、上手く条件定義が出来ていなくてif文の()の中がおかしいと思っています。後別にspanを使わなくてもいいですが、なんとなく使っています。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。