foreachを使用したModalをtwigとjavascriptで実行したい。
解決したいこと
foreachを使用したModalをtwigとjavascriptで実行したいです。
foreachを使ってphpファイルから送られたデータベースのprimary keyを活用し、それぞれのmodal buttonをclickした毎に起動させたいが上手くいきません。
下記にコードを記述いたします。（既にforeach文で{{user_id}}にprimary(1,2,3,,,)が入ってます。）
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名を取得する方法がありますでしょうか。
0
