a=1; getElementById('id${a}'); (※「'」→「`」に変えてください)
JavaScriptでは、文字列をバッククオートで囲み、さらにその中で**${変数}**とすれば式展開ができます。(こちらの記事でとても分かりやすく書かれています)
そしてこれは、直接出力する文字列だけでなく、getElementByIdの引数として渡すid名でも同じことができます!
たとえば下のコードでは、"id1"というid名を「id${a}」(a=1)という形で取得しています。
cake.html
<html>
<body>
<input type="text" id="id1">
<script>
let a = 1;
document.getElementById(`id${a}`).value = "ケーキ";
</script>
</body>
</html>
注意:「"(ダブルクォート)」ではなく「`(バッククォート)」で囲むこと!
getElementByIdでは基本的に、
getElementById("id1")のように引数をダブルクォートで囲みます。
しかしid名の中で式展開をしたい場合は、ダブルクォートではなくShift
と@
ボタンの同時押しで出せる「(バッククォート)**」を絶対使わなければいけません。 また、
Shiftと
7`同時押しの「'(シングルクォート)**」は形が似ていますが、これでは上手くいきませんのでそこもご注意を!
以上です。
もしかしたら皆さんにとっては常識なことかもしれないのですが、「出力する文字列ではなくコード中で使うid名でも式展開が効く」ことを作業中に知って嬉しかったので投稿してみました。