Quiero poner dos botones. Uno seria el botón SIGUIENTE
y el otro el boton ANTERIOR
que me muestren las diferentes tablas creadas y que cuando llegue al último no aparezca el botón SIGUIENTE
. Del mismo modo cuando aparezca la primera tabla no aparezca el boton ANTERIOR
.
Este código es para mostrar varias tablas al apretar algun botón
Código html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copa mundial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="menu">
<ul>
<li><a href="#">hola</a></li>
<li><a href="#">todos</a></li>
<li><a href="#">acordamos</a></li>
<li><a href="#">algo</a></li>
</ul>
</nav>
<div class="tablas">
<div class="contenedor anterior" style="order: -1;">
<button id="anterior" onclick="pasarTablaA()">ANTERIOR</button>
</div>
<div id="centro" class="contenedor centro" style="order: 0;"></div>
<div class="contenedor siguiente" style="order: 1;">
<button id="siguiente" onclick="pasarTablaS()">SIGUIENTE</button>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>
Código javascript
let grupo1 = [{
nombre: 'AS. DEL SEÑOR',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: '3RA. ETAPA',
jugados: 3,
ganados: 4,
empatados: 2,
perdidos: 3,
golesf: 8,
golesc: 10,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'PLINIO MELENDEZ',
jugados: 3,
ganados: 1,
empatados: 1,
perdidos: 3,
golesf: 8,
golesc: 10,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 20',
jugados: 3,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 8,
golesc: 2,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SANJOSE',
jugados: 3,
ganados: 0,
empatados: 9,
perdidos: 3,
golesf: 8,
golesc: 10,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: '4TA. ETAPA',
jugados: 3,
ganados: 3,
empatados: 4,
perdidos: 3,
golesf: 8,
golesc: 10,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},]
let grupo2 = [{
nombre: 'FUENTE DE AMOR',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'LOS PINOS',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'MONTE MATINEZ',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 7',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 9',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: '3 DE MAYO',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},]
let grupo3 = [{
nombre: 'POZO DE JACOB',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 2',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 3',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SANTA MONICA',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'LAS AMERICAS',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 6',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},]
let grupo4 = [{
nombre: 'DIOS VIVIENTE',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 1',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'POLICIA NACIONAL',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'LOS NOGALES',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'LA COLORADA',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 4',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},]
let grupo5 = [{
nombre: 'C. SIN FRONTERAS',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
},
{
nombre: 'SECTOR 17',
jugados: 5,
ganados: 1,
empatados: 9,
perdidos: 3,
golesf: 6,
golesc: 3,
diferencia: function(){
return this.golesf - this.golesc
},
puntos: function(){
return this.ganados*3 + this.empatados*1
}
}]
var s;
function comparar(a, g){
function SortArray(x, y){
if (x.puntos() < y.puntos()) {return 1;}
if (x.puntos() > y.puntos()) {return -1;}
if(x.diferencia() > y.diferencia()) {return -1;}
if(x.diferencia() > y.diferencia()) {return 1;}
}
s = a.sort(SortArray);
const headtable = ['', 'EQUIPOS', 'J', 'G', 'E', 'P', 'GF', 'GC', 'DF', 'PT']
const divv = document.createElement('div')
divv.className='contenido'
const div1 = document.querySelector('.centro')
const h1 = document.createElement('h1')
h1.appendChild(document.createTextNode('Grupo '+g));
h1.className='titulo tablaaa'
divv.appendChild(h1)
div1.appendChild(divv)
h1.style.cssText='text-align: center;'
const tabla = document.createElement('table')
const thead = document.createElement('thead')
const tbody = document.createElement('tbody')
for (let i = 0; i < headtable.length; i++) {
const th = document.createElement('th')
th.textContent = headtable[i]
thead.appendChild(th)
}
tabla.className="tablaa"
var tr=[]
for (var i = 0; i < s.length; i++){
tr[i] = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var td5 = document.createElement('td');
var td6 = document.createElement('td');
var td7 = document.createElement('td');
var td8 = document.createElement('td');
var td9 = document.createElement('td');
var td0 = document.createElement('td');
if (i==0 || i==1) {
td2.className="pass"
td3.className="pass"
td4.className="pass"
td5.className="pass"
td6.className="pass"
td7.className="pass"
td8.className="pass"
td9.className="pass"
td0.className="pass"
}
td1.className="num"
td1.appendChild(document.createTextNode(i+1));
td2.appendChild(document.createTextNode(s[i].nombre));
td3.appendChild(document.createTextNode(s[i].jugados));
td4.appendChild(document.createTextNode(s[i].ganados));
td5.appendChild(document.createTextNode(s[i].empatados));
td6.appendChild(document.createTextNode(s[i].perdidos));
td7.appendChild(document.createTextNode(s[i].golesf));
td8.appendChild(document.createTextNode(s[i].golesc));
td9.appendChild(document.createTextNode(s[i].diferencia()));
td0.appendChild(document.createTextNode(s[i].puntos()));
tr[i].appendChild(td1);
tr[i].appendChild(td2);
tr[i].appendChild(td3);
tr[i].appendChild(td4);
tr[i].appendChild(td5);
tr[i].appendChild(td6);
tr[i].appendChild(td7);
tr[i].appendChild(td8);
tr[i].appendChild(td9);
tr[i].appendChild(td0);
tbody.appendChild(tr[i]);
}
divv.appendChild(tabla)
tabla.appendChild(thead)
tabla.appendChild(tbody)
return g;
}
comparar(grupo1, 1)
var cont=0;
function pasarTablaS(){
var div = document.querySelector('.centro')
var tt = document.querySelector('.contenido')
div.removeChild(tt)
var s=document.querySelector('.siguiente')
cont++
if(cont==1){
comparar(grupo2, 2)
}else if(cont==2){
comparar(grupo3, 3)
}else if(cont==3){
comparar(grupo4, 4)
}else if(cont==4){
s.style.cssText='visibility: hidden'
comparar(grupo5, 5)
}
console.log('conts: '+cont)
}
function pasarTablaA(){
var valor=cont;
var div = document.querySelector('.centro')
var tt = document.querySelector('.contenido')
div.removeChild(tt)
var s=document.querySelector('.anterior')
if(cont==1){
comparar(grupo2, 2)
}else if(cont==2){
comparar(grupo3, 3)
}else if(cont==3){
comparar(grupo4, 4)
}else if(cont==4){
comparar(grupo5, 5)
}
cont--
console.log('conta: '+cont)
return valor;
}