(JavaScript) ボタンを配置する関数

作ったもの

　HTML では、UI としてボタンを配置したいことが多くあります。タグを手打ちするのも一つの方法ですが、これを JavaScript で記述して関数にまとめると次回から短く書けます。

function tagButton(str, callback, arg, classname, id){
	arg = !arg ? '();' : "('" + arg + "');";
	let attr_id = !id ? '' : ' id="' + id + '"';
	let attr_cn = !classname ? '' : ' class="' + classname + '"';
	return '<button type="button" onclick="' + callback.name + arg + '"'
		+ attr_cn + attr_id + '>' + str + '</button>';
}

使用例

// "これはボタン" と書かれたボタンを作成
// 押された場合に呼び出される関数 は Sub
// 関数 Sub に渡される引数（文字列限定）は "メッセージです"
// ボタンのcssクラスは "class_1"
// ボタン自体のIDは "id_1"
document.write(tagButton("これはボタン", Sub, "メッセージです", "class_1", "id_1"));
function Sub(arg){
	alert(arg);
}

実行結果

補足

　ボタンを標準の見た目のまま変更する必要がない場合は classname は必要ありません。また、DOM を使ってボタンの文字列の変更などをする必要がない場合は id は必要ありません。