foreachを使用したModalをtwigとjavascriptで実行したいです。
foreachを使ってphpファイルから送られたデータベースのprimary keyを活用し、それぞれのmodal buttonをclickした毎に起動させたいが上手くいきません。
twig===============================================================================
<button id="modalOpen{{user_id}}" class="button">例文</button>
<div id="easyModal{{user_id}}" class="modal">
<div class="modal-content">
<div class="modal-header">
<h1>Great Job !!</h1>
<span class="modalClose{{user_id}}">×</span>
</div>
<div class="modal-body">
<p>{{value.example}}</p>
</div>
</div>
</div>
</div>
twig===============================================================================
Javascript===============================================================================
const buttonOpen = document.getElementById("modalOpen");
const modal = document.getElementById('easyModal');
const buttonClose = document.getElementsByClassName('modalClose')[0];
//ボタンがクリックされた時
buttonOpen.addEventListener('click', modalOpen);
function modalOpen() {
modal.style.display = 'block';
};
//バツ印がクリックされた時
buttonClose.addEventListener('click', modalClose);
function modalClose() {
modal.style.display = 'none';
};
//モーダルコンテンツ以外がクリックされた時
addEventListener('click', outsideClose);
function outsideClose(e) {
if (e.target == modal) {
modal.style.display = 'none';
};
};
Javascript===============================================================================
上記のjavascriptのgetElementByIdとgetElementByClassNameの括弧内は何を入れたら良いか分からなくなり、お助け頂けますと幸いでございます。
Clickされた値のId名をscriptのvarで変数に代入するやり方も試そうとしましたが、こちらも上手くいかずgetElementBy以外にId名を取得する方法がありますでしょうか。
まず、DevToolsなどでコンソールログを確認する事は基本です。
<button id="modalOpen{{user_id}}" class="button">
に対して
const buttonOpen = document.getElementById("modalOpen");
は、id名が異なっている事に気づくことは出来ますか？
まずはそういう異なってる所を探してからデバッグしていって下さい。
getElementByIdとgetElementsByClassNameの引数に何を入れたら分からないとのことですが使い方については、下記のMDNなりで調べて下さい。そこに全部書いてあります。
getElementBy以外にId名を取得する方法がありますでしょうか
何か勘違いされてるかと思いますが、getElementBy*()系は要素（Element）を獲得するものであって基本id名を取得するものではありません。