LoginSignup
2

More than 3 years have passed since last update.

getElementByIdの引数は式展開できる!

Posted at

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>

実行結果は
ケーキ.png
ちゃんと取得できています!

注意:「"(ダブルクォート)」ではなく「`(バッククォート)」で囲むこと!

getElementByIdでは基本的に、
getElementById("id1")のように引数をダブルクォートで囲みます。
しかしid名の中で式展開をしたい場合は、ダブルクォートではなくShift@ボタンの同時押しで出せる「`(バッククォート)」を絶対使わなければいけません。
また、Shift7同時押しの「'(シングルクォート)」は形が似ていますが、これでは上手くいきませんのでそこもご注意を!

以上です。
もしかしたら皆さんにとっては常識なことかもしれないのですが、「出力する文字列ではなくコード中で使うid名でも式展開が効く」ことを作業中に知って嬉しかったので投稿してみました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2