インプットボックスとインプットボタンを対で作成し、作成した複数のインプットボタンをどれも選択可能にする。
但し、作成できるインプットボックスとインプットボタンの対は仕様上３セットまでにしている。(拡張は容易）
インプットボタンの追加は一度しかできないよう、二度目に指定された場合はプログラムの再ロードを指示する。
<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>input要素を複数追加</title>
<style>
#wrapper{width: 380px;}
dt{background: lightblue; padding:4px; margin-top:8px;}
dd{margin:2px;}
</style>
<script type="text/javascript">
function onbtnClickAll( vlu ) {
target = document.getElementById("dispInput");
target.innerHTML = vlu;
}
function onbtnClick1() {
val = document.getElementById("txt_val1").value;
onbtnClickAll(val);
}
function onbtnClick2() {
val = document.getElementById("txt_val2").value;
onbtnClickAll(val);
}
function onbtnClick3() {
val = document.getElementById("txt_val3").value;
onbtnClickAll(val);
}
var doOnce = 0;
function addElement() {
if (doOnce > 0) {
alert("プログラムをロードしなおして実行してください。");
} else {
doOnce++;
var elemNum = document.getElementById("txt_elemNum").value;
// alert("elemNum=" + elemNum);
if (elemNum<=3) {
var achEle = document.getElementById("anchor");
for(var i=1; i<=elemNum; i++) {
var divEle = document.createElement('div');
divEle.id = "div" + i;
divEle.style.margin = "5px";
achEle.appendChild(divEle);
var subAchEle = document.getElementById(divEle.id);
var element_input = document.createElement('input');
element_input.id = "txt_val"+i;
element_input.type = "text";
element_input.style = "width:10px;";
element_input.maxLength = "3";
subAchEle.appendChild(element_input);
// div要素にinput textエレメントを追加
var element_btn = document.createElement('input');
element_btn.id = "btn_disp"+i;
element_btn.type = "button";
element_btn.value = "表示 "+i;
element_btn.setAttribute("onclick", "onbtnClick"+i+"();");
subAchEle.appendChild(element_btn);
// div要素にinput buttonエレメントを追加
}
} else {
alert("作成する要素の個数は3個以下です。");
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<h1>input要素を複数追加</h1>
<input type="text" id="txt_elemNum" size="1" maxLength="1">個
<button onclick="addElement()">要素を追加</button>
<dl>
<dt>input情報の入力は<span id="dispInput"></span></dt>
</dl>
<div id="anchor"></div>
</div>
</body>
</html>