ArmadoDeForm.js
1.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function ArmarForm() {
document.getElementById("ArmarFormContainer").style.display="none";
document.getElementById("BotonesContainer").style.display="block";
document.getElementById("TabsContainer").style.display="block";
let m = document.getElementById("CantBotones").value;
let n;
for (n = 0; n < m; n++) {
let padreBotones = document.getElementById("BotonesContainer");
let padreTabs = document.getElementById("TabsContainer");
let boton = document.createElement("Button");
padreBotones.appendChild(boton);
boton.setAttribute("id", "Boton" + n);
boton.setAttribute("value", n);
boton.setAttribute("class", "Botones");
boton.setAttribute("onclick", HabilitarTab(this));
let ancho = ((100 - (0.2 * m)) / m) + "%";
boton.style.width = ancho;
let tab = document.createElement("div");
padreTabs.appendChild(tab);
tab.style.width=ancho * m;
tab.setAttribute("id", "Tab" + n);
tab.setAttribute("class", "Tabs");
}
document.getElementById("Tab0").style.display="block";
}
function HabilitarTab(elemento) {
let IDBoton= elemento.id;
var i, Tabs, Botones;
Tabs = document.getElementsByClassName("Tabs");
for (i = 0; i < Tabs.length; i++) {
Tabs[i].style.display = "none";
}
Botones = document.getElementsByClassName("Botones");
for (i = 0; i < Botones.length; i++) {
Botones[i].className = Botones[i].className.replace(" BotonesActive", "");
}
document.getElementById(IDBoton).style.display = "block";
evt.currentTarget.className += " active";
}
}