Q&A
最初はそうしたのですが、clearボタンで入力した部分を消した場合に◯を消したのか✕を消したのか判定できなくてポイントに誤差が生じてしまいます。
消したときに〇✕を確かめられる方法があればいいのですが、、、
###前提・実現したいこと
表に〇✕を記入していき、スコアボードのように◯の数を数えて点数を表示できるようにしたいです。得点を表示する場所は真ん中のセルです。（2 - 1のように中央にハイフンを使って左と右の点数を表示したいです。）
###HTMLのソースコード
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" charset="utf-8" src="js/app.js"></script> </head> <body> <input type="button" name="maru" value="◯" onClick="getPoint(1), countPoint(1)"> <input type="button" name="batu" value="✕" onClick="getPoint(2), countPoint(2)"> <input type="button" name="clear" value="clear" onClick="getPoint(3), countPoint(3)"> <br /> <table border="1"> <tr> <td height = "60" width="35" rowspan="2">A</td> <td id="1" height = "30" width="16"></td> <td id="3"height = "30" width="16"></td> <td id="5" height = "30" width="16"></td> <td id="7" height = "30" width="16"></td> <td id="9" height = "30" width="16"></td> <td id="11" height = "30" width="16"></td> <td id="13" height = "30" width="16"></td> <td id="15" height = "30" width="16"></td> <td id="17" height = "30" width="16"></td> <td id="19" height = "30" width="16"></td> <td id="21" height = "30" width="16"></td> <td id="23" height = "30" width="16"></td> <td id="25" height = "30" width="16"></td> <td id="27" height = "30" width="16"></td> <td id="count1" height = "60" width="45" rowspan="2"></td> <td height = "60" width="35" rowspan="2">B</td> <td id="2" height = "30" width="16"></td> <td id="4" height = "30" width="16"></td> <td id="6" height = "30" width="16"></td> <td id="8" height = "30" width="16"></td> <td id="10" height = "30" width="16"></td> <td id="12" height = "30" width="16"></td> <td id="14" height = "30" width="16"></td> <td id="16" height = "30" width="16"></td> <td id="18" height = "30" width="16"></td> <td id="20" height = "30" width="16"></td> <td id="22" height = "30" width="16"></td> <td id="24" height = "30" width="16"></td> <td id="26" height = "30" width="16"></td> <td id="28" height = "30" width="16"></td> </tr> <tr> <td id="29" height = "30" width="16"></td> <td id="31" height = "30" width="16"></td> <td id="33" height = "30" width="16"></td> <td id="35" height = "30" width="16"></td> <td id="37" height = "30" width="16"></td> <td id="39" height = "30" width="16"></td> <td id="41" height = "30" width="16"></td> <td id="43" height = "30" width="16"></td> <td id="45" height = "30" width="16"></td> <td id="47" height = "30" width="16"></td> <td id="49" height = "30" width="16"></td> <td id="51" height = "30" width="16"></td> <td id="53" height = "30" width="16"></td> <td id="55" height = "30" width="16"></td> <td id="30" height = "30" width="16"></td> <td id="32" height = "30" width="16"></td> <td id="34" height = "30" width="16"></td> <td id="36" height = "30" width="16"></td> <td id="38" height = "30" width="16"></td> <td id="40" height = "30" width="16"></td> <td id="42" height = "30" width="16"></td> <td id="44" height = "30" width="16"></td> <td id="46" height = "30" width="16"></td> <td id="48" height = "30" width="16"></td> <td id="50" height = "30" width="16"></td> <td id="52" height = "30" width="16"></td> <td id="54" height = "30" width="16"></td> <td id="56" height = "30" width="16"></td> </tr> </table> </body> </html>
###JavaScriptのソースコード
var n = 1; function getPoint(btnNo){ var x = "◯"; //得点 var y = "✕"; //失点 var z = ""; //消す if(btnNo == 1){ document.getElementById(n.toString()).textContent = x; n = n+1; document.getElementById(n.toString()).textContent = y; n = n+1; }else if(btnNo == 2){ document.getElementById(n.toString()).textContent = y; n = n+1; document.getElementById(n.toString()).textContent = x; n = n+1; }else if(btnNo == 3){ if (n>1){ n = n-1; document.getElementById(n.toString()).textContent = z; n = n-1; document.getElementById(n.toString()).textContent = z; } } } function countPoint(btnNo){ var countx = $( 'td:contains("◯")').length; //左のポイント var county = $( 'td:contains("✕")').length; //右のポイント if(btnNo == 1){ document.getElementById("count1").textContent = countx; }else if(btnNo == 2){ }else if(btnNo == 3){ } }
###試したこと
$( 'td:contains("◯")').length;でセルの◯の個数を取り出せるかと思って使ってみたのですが、表示されませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
HTML JavaScript
回答2件
0
自己解決
javascriptの配列を利用して解決しました。
var n = 1; //id番号 function getPoint(btnNo){ var x = "◯"; //得点 var y = "✕"; //失点 var z = ""; //消す if(btnNo == 1){ document.getElementById(n.toString()).textContent = x; n = n+1; document.getElementById(n.toString()).textContent = y; n = n+1; }else if(btnNo == 2){ document.getElementById(n.toString()).textContent = y; n = n+1; document.getElementById(n.toString()).textContent = x; n = n+1; }else if(btnNo == 3){ if (n>1){ n = n-1; document.getElementById(n.toString()).textContent = z; n = n-1; document.getElementById(n.toString()).textContent = z; } } } var countArray = []; var arrayNumber = -1; var countx = 0; var county = 0; function countPoint(btnNo){ if(btnNo == 1){ countx = countx + 1; countArray.push("◯"); document.getElementById("count1").textContent = countx +"-"+ county; arrayNumber += 1; }else if(btnNo == 2){ county = county + 1; countArray.push("✕"); document.getElementById("count1").textContent = countx +"-"+ county; arrayNumber += 1; }else if(btnNo == 3){ if(countArray[arrayNumber] == "◯"){ countx = countx - 1; countArray.pop() arrayNumber -= 1; document.getElementById("count1").textContent = countx +"-"+ county; }else if(countArray[arrayNumber] == "✕"){ county = county - 1; countArray.pop() arrayNumber -= 1; document.getElementById("count1").textContent = countx +"-"+ county; } } }
投稿2017/06/25 22:51
総合スコア16
0
後から数えるのではなく、getPoint()を呼び出すごとにカウンタを+1していくようにすればいいのでは？
投稿2017/06/25 17:13
総合スコア13671
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。