tableのセルに指定するidとそれを変数として使用するには

###前提・実現したいこと
このコードを実行すると◯✕ボタンを押すとAの表に対応したものが表示されBにその逆のものが表示され、◯がついた方に一点が追加されるようになっています。また、clearボタンを押すと直前に入力した内容消えて得点も戻るようになっています。
しかし、このコードではHTML部分のId指定部分に数字を使ってしまっています。Idをcell1のように数字部分の前にcellと付け加えたいのですが、JavaScriptでIdの数字を直接計算式に使用しているのでどうすればいいのかよくわかりません。JavaScriptの方でidを指定していく際に変数をcellnなどと置いてnの部分だけ変化させることはできないでしょうか？

###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; //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;
        }
    }
}

###補足情報(言語/FW/ツール等のバージョンなど)
HTML JavaScript

行動規範の内容に同意します

回答2件

ベストアンサー

どこかに、var prefix = 'cell'; などと書いておいて、idで取得する際につけるだけですかね。

JavaScript
1//document.getElementById(n.toString())
2document.getElementById(prefix + n.toString())

投稿2017/06/29 06:28

x_x

総合スコア13749

JavaScriptでIdの数字を直接計算式に使用しているのでどうすればいいのかよくわかりません。

カスタムデータ属性を使えばよいのでは。

【data-* - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*

【HTML5における独自データ属性の取り扱い - Qiita】
http://qiita.com/skinoshita/items/388eb277843e2d0c03de

JavaScriptの方でidを指定していく際に変数をcellnなどと置いてnの部分だけ変化させることはできないでしょうか？

できます。書かれているコードの挙動（目的）がいまいちわからないため具体的には書けませんが、querySelectorAllで必要な要素を取得してidを指定していけば出来ると思います。

【document.querySelectorAll - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

【querySelectorAll()-CSSセレクタで全ての要素を取得する方法 | リファレンス】
https://syncer.jp/javascript-reference/document/queryselectorall

投稿2017/06/28 19:37

kei344

総合スコア69398

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

tableのセルに指定するidとそれを変数として使用するには

関連した質問