0
DBからデータを取得し、同じdivに配置されたボタンのデータをリストし、onclickという新しいdivを最大値に達するまで作成するプログラムを作成しています。この例を他の人に役立てるために、DBからデータを取得するのではなく、いくつかの一般的な数値を使用しました（値5は変数levmaxに割り当てられ、forループごとにいくつかの値が割り当てられます）。 DB）。複数のDIVが隣り合っています
私が持っている問題は、どのようにすべてのDIVをお互いに並べるかということです。私がここで見つけたすべての例は、コードのHTML部分で作成されている場合にどのように配置するのかを説明しています。しかし、私はJSの部分で私のDIVを作成したい。
すべてのDIVが互いに隣り合っている部分を除いて、コードは正常に動作します。コードには80行のようなものがありますが、必要なのはDIVの整列方法だけです。コードは次のとおりです。
<html>
<head>
<script>
var lev = 0;
var levmax=5;
var count = 0;
function addBu(){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<3; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
if(lev===1){
bu.addEventListener("click", novo);
}
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
};
function novo(){
if(lev===1){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<4; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.addEventListener("click", repeat);
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
}
function repeat(){
if(lev<levmax){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<2; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.addEventListener("click", repeat);
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
var le=(lev-1).toString();
document.getElementById(le).removeEventListener("click", repeat);
}
}
}
</script>
</head>
<body id="kod" onload="addBu()">
</body>
</html>enter code here
<head>
<script>
var lev = 0;
var levmax=5;
var count = 0;
function addBu(){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<3; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
if(lev===1){
bu.addEventListener("click", novo);
}
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
};
function novo(){
if(lev===1){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<4; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.addEventListener("click", repeat);
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
}
function repeat(){
if(lev<levmax){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<2; i++){
var bu= document.createElement('BUTTON');
var te = document.createTextNode('Text');
var te1 = document.createTextNode(lev.toString());
var br = document.createElement('BR');
bu.addEventListener("click", repeat);
bu.id=lev.toString();
bu.appendChild(te);
bu.appendChild(te1);
di.appendChild(bu);
di.appendChild(br);
count++;
}
bo.insertBefore(di, bo.childNodes[0]);
var le=(lev-1).toString();
document.getElementById(le).removeEventListener("click", repeat);
}
}
}
</script>
</head>
<body id="kod" onload="addBu()">
</body>
</html>