Javascript MEMO

日本語

ENGLISH

動的コントロール作成

for文などでタグを動的に作成

[サンプル]

[HTML]

copy

let html='';
for(i=0;i<3;i++)
{
	html+='<button class="btn" data-id="'+(i+1)+'">button '+(i+1)+'</button><br>';
}
const btn = document.getElementById("btn");
btn.innerHTML=html;

document.querySelectorAll('.btn').forEach(btn => 
{
	btn.addEventListener('click', handleButtonClick);
});
 
function handleButtonClick(e) 
{
	const btn = e.currentTarget;
	const {id} = btn.dataset;
	test(id);
}
 
function test(id)
{
	const result = document.getElementById("result");
	result.innerText = "button id:"+id;
}

このサンプルではhtmlのボタンをhtml文字列ににして出力しています。

let html='';
for(i=0;i<3;i++)
{
	html+='<button class="btn" data-id="'+(i+1)+'">button '+(i+1)+'</button><br>';
}
const btn = document.getElementById("btn");
btn.innerHTML=html;

ボタンは3個で一定の部分(idとボタン名)だけが異なるだけなので
for文を使って文字列を準備します。
その結果をdivタグに出力しています。

htmlとしてdivタグ内に出力されているためボタンとしての機能が実装された状態になります。
そのため、出力したボタンidからボタンイベントを実行できます。

戻る

著作権情報

ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。