JavaScript テンプレートリテラルに変数の内容が反映されない。

Question

前提・実現したいこと

ボタンを押すたびにアコーディオンを増やすことを実装しようとしています。そのため他の要素と差別化するために、テンプレートリテラルを使って、要素に連番を付けたいと思っています。

発生している問題・エラーメッセージ

addAccordion関数を使って、アコーディオンをメインのhtmlに結合させているのですが、console.log(accordionCount)実行すると、数が１ずつ増加しているのですが、肝心の追加したhtml要素は連番ではなく、初期値の1が入ってしまいます。なぜ、htmlにしっかりと連番が反映されないのでしょうか？

jsはwebpackでコンパイルして読み込ませています。

該当のソースコード

'use strict';

let accordionCount = 1;
const list = document.getElementById('list');
console.log(list, 'リスト');

const html = `
<li id="question${accordionCount}" class="w-full mx-auto">
<div class="shadow-md">
<div class="tab w-full overflow-hidden border-t">
<input class="absolute opacity-0" id="tab-single-one" type="radio" name="tabs2" />
<label class="block p-5 leading-normal cursor-pointer" for="tab-single-one">第${accordionCount}問</label>
<div class="tab-content overflow-hidden border-l-2 bg-gray-100 border-yellow-500 leading-normal">
<div class="p-5">
<div class="my-2">
<label class="block" for="description">問題</label>
<textarea name="question${accordionCount}" placeholder="問題文"
class="w-full focus:outline-none border focus:border-yellow-300" id="question${accordionCount}"
name="question${accordionCount}" type="text"></textarea>
</div>
<div class="my-2">
<label class="block" for="${accordionCount}_choice1">選択肢1</label>
<input required name="correct_choice1" value="${accordionCount}_choice1" type="radio">
<input required class="w-11/12 focus:outline-none border focus:border-yellow-300"
placeholder="選択肢1" id="${accordionCount}_choice1" name="${accordionCount}_choice1" type="text">
</div>
<div class="my-2">
<label class="block" for="${accordionCount}_choice1">選択肢2</label>
<input required name="correct_choice1" value="${accordionCount}_choice2" type="radio">
<input required class="w-11/12 focus:outline-none border focus:border-yellow-300"
placeholder="選択肢2" id="${accordionCount}_choice1" name="${accordionCount}_choice2" type="text">
</div>
<div class="my-2">
<label class="block" for="${accordionCount}_choice1">選択肢3</label>
<input required name="correct_choice1" value="${accordionCount}_choice3" type="radio">
<input required class="w-11/12 focus:outline-none border focus:border-yellow-300"
placeholder="選択肢3" id="${accordionCount}_choice1" name="${accordionCount}_choice3" type="text">
</div>
<div class="my-2">
<label class="block" for="${accordionCount}_choice1">選択肢4</label>
<input required name="correct_choice1" value="${accordionCount}_choice4" type="radio">
<input required class="w-11/12 focus:outline-none border focus:border-yellow-300"
placeholder="選択肢4" id="${accordionCount}_choice4" name="${accordionCount}_choice4" type="text">
</div>
</div>
</div>
</div>
</div>
</li>
`;

addAccordion = () => {
    accordionCount += 1;
    console.log(accordionCount);
    list.insertAdjacentHTML('beforeend', html);
};

removeAccordion = () => {};

Answer 1

なぜ、htmlにしっかりと連番が反映されないのでしょうか？

const html = ・・・の 代入が実行されるとき、その時点での変数 accordionCount の値(1)が、${accordionCount} に反映されて、右辺（= の右側）の文字列が作られますが、その出来上がった文字列には、

• 自分、この後もaccordionCountの値をウォッチして、変更があったら自動的に${accordionCount}の部分を自動的に変更しときますわー

みたいな、気いきかしてくれる機能は無いねん。そやからずっと、最初に作ったときの${accordionCount}んとこは1のまんまや。とりま最小限の修正するとしたら、以下の２箇所やねん。

(1)変数htmlを、文字列ではなく、文字列を返す関数にする。

- const html = `
+ const html = () => `

(2) html を使っていたところで、関数htmlを実行し、それによって返された文字列を使うようにする。

- list.insertAdjacentHTML('beforeend', html);
+ list.insertAdjacentHTML('beforeend', html());

Comments

[Patao_program]

そうでしたか〜！ありがとうございます！

Answer 2

constだからでは？