Javascript MEMO

copy

document.querySelectorAll('.b1').forEach(btn => 
{
	btn.addEventListener('click', handleButtonClick);
});

function handleButtonClick(e) 
{
	const btn = e.currentTarget;//クリックされたボタン要素
	const {id} = btn.dataset;//data-id を取得
	//console.log('clicked id:', id);
	//共通処理を実装します
	test1(id);
}

function test1(id)
{
	const result1 = document.getElementById("result1");
	result1.innerHTML = "button id:"+id;
}

copy

document.querySelectorAll('.b1').forEach(btn => 
{
	btn.addEventListener('click', handleButtonClick);
});

function handleButtonClick(e) 
{
	const btn = e.currentTarget;//The button element that was clicked
	const {id} = btn.dataset;//Get data-id
	//console.log('clicked id:', id);
	//Implement common processing
	test1(id);
}

function test1(id)
{
	const result1 = document.getElementById("result1");
	result1.innerHTML = "button id:"+id;
}

同じ処理をするボタングループです。
ボタン固有情報は data-xxx属性を使用します。
HTML Living Standardで「カスタムデータ属性」として正式に定義されています。
「data-」の後は英小文字とハイフンで記述します。
element.dataset.名前で取得できます。

button class="b1"

「class="b1"」と3個のボタンのclassのidをすべて共通にします。

document.querySelectorAll('.b1').forEach(btn =>

同じclass idについて「addEventListener」でイベントを実行させます。

const {id} = btn.dataset;

datasetで「data-id」の結果を返します。

copy

const actions = 
{
	btn1(btn, e) 
	{
		const id = btn.dataset.id;
		test2(1, id);
	},
	btn2(btn, e) 
	{
		const id = btn.dataset.id;
		test2(2, id);
	},
	btn3(btn, e) 
	{
		const id = btn.dataset.id;
		test2(3, id);
	},
};
function test2(no, id)
{
	const result2 = document.getElementById("result2");
	result2.innerHTML = "button no:" + no +" id:" + id;
}
document.querySelectorAll('button[data-action]').forEach(btn => 
{
	btn.addEventListener('click', e => 
	{
		const { action } = e.currentTarget.dataset;
		const fn = actions[action];
		if (fn) fn(e.currentTarget, e);
	});
});

copy

const actions = 
{
	btn1(btn, e) 
	{
		const id = btn.dataset.id;
		test2(1, id);
	},
	btn2(btn, e) 
	{
		const id = btn.dataset.id;
		test2(2, id);
	},
	btn3(btn, e) 
	{
		const id = btn.dataset.id;
		test2(3, id);
	},
};
function test2(no, id)
{
	const result2 = document.getElementById("result2");
	result2.innerHTML = "button no:" + no +" id:" + id;
}
document.querySelectorAll('button[data-action]').forEach(btn => 
{
	btn.addEventListener('click', e => 
	{
		const { action } = e.currentTarget.dataset;
		const fn = actions[action];
		if (fn) fn(e.currentTarget, e);
	});
});

const actions =
{
...
};

ボタンを実行したあとの関数をオブジェクト(配列)にまとめています。

document.querySelectorAll('button[data-action]').forEach(btn =>

button[data-action]からCSSセレクタで「data-action 属性を持つ<button> 要素」を全部取得します。

const fn = actions[action];

actionにはe.currentTarget.datasetで一致する名前が入ります。
actions配列から一致する関数をfnに格納します。
fnが存在する関数であればボタンのdata-actionに紐づいた関数を実行します。

copy

const actions2 = 
{
	button1(btn, e) {test3(1);},
	button2(btn, e) {test3(2);},
	button3(btn, e) {test3(3);},
};
function test3(no)
{
	const result3 = document.getElementById("result3");
	result3.innerHTML = "button no:" + no;
}
const group3 = document.getElementById('group3');

group3.addEventListener('click', e => 
{
	const btn = e.target.closest('button[data-action]');
	if (!btn || !group3.contains(btn)) return; // 外側のクリックは無視
	
	const fn = actions2[btn.dataset.action];
	if (fn) fn(btn, e);
});

copy

const actions2 = 
{
	button1(btn, e) {test3(1);},
	button2(btn, e) {test3(2);},
	button3(btn, e) {test3(3);},
};
function test3(no)
{
	const result3 = document.getElementById("result3");
	result3.innerHTML = "button no:" + no;
}
const group3 = document.getElementById('group3');

group3.addEventListener('click', e => 
{
	const btn = e.target.closest('button[data-action]');
	if (!btn || !group3.contains(btn)) return; // Ignore outside clicks
	
	const fn = actions2[btn.dataset.action];
	if (fn) fn(btn, e);
});

data-* にグループ化して一つにまとめ、各ボタンの関数を配列化してグループ化したイベントから各ボタンの関数を実行します。

closest('button[data-action]')
button[data-action]はCSSセレクタです。
closestは、選択した要素から始めて親方向に向かって一番近いセレクタ一致要素を返します。

buttonタグをformタグ内に配置すると、
既定では type="submit" として扱われ、フォームが送信（submit イベント）されます。
送信させたくないなら、type="button" を明示してください。
(例)

<button type="button" data-action="button1" data-id="0">button 1</button>