Hola estoy realizando una api, donde al pulsar el botón para cambiar de página mostrar su correspondiente contenido, si por ejemplo está en la page=1, si pulso para ir a la siguiente que muestre page=2, pero no lo hace como es debido. Gracias de antemano.
var div1 = document.createElement("div");
div1.setAttribute("id", "div1");
var div2 = document.createElement("div");
div2.setAttribute("id", "resultado");
// Declaro la variable contador
let contador = 1;
let sumar1 = page=1;
let data = [];
const valor = document.querySelector('#span');
const botones_aumentar = document.querySelectorAll('.boton');
botones_aumentar.forEach(boton => {
boton.addEventListener('click', function (e) {
const estilos = e.currentTarget.classList;
const xhttp = new XMLHttpRequest();
let url1 = 'https://reqres.in/api/users';
if (estilos.contains('aumentar')) {
xhttp.open('GET', url1, true);
xhttp.send();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let datos = JSON.parse(this.responseText);
// aquí solo agregué ['data']
console.log(datos['data']);
let resultado = document.querySelector('#resultado');
resultado.innerHTML = '';
//len variable donde guardo tamaño del array datos['data']
len = datos['data'].length;
//cambié a un for tradicional
for (let i = 0; i < len; i++) {
//igualo la variable item a la correspondiente iteración
let item = datos['data'][i];
[item.first_name, item.last_name];
var div = document.createElement('div');
div.setAttribute('id', 'container')
var p0 = document.createElement('p');
var p1 = document.createElement('p');
p1.setAttribute("id", "fotos");
var hr = document.createElement('hr');
p0.innerHTML = item.first_name + " " + item.last_name;
var img = document.createElement("img");
img.setAttribute("src", item.avatar);
document.getElementById("fotos");
p1.appendChild(img);
div.appendChild(hr);
div.appendChild(p0)
div.appendChild(p1);
resultado.appendChild(div);
}
}
}
sumar1++;
contador++;
}
valor.textContent = contador;
})
})
document.body.appendChild(div1).appendChild(btn1);
document.body.appendChild(div1).appendChild(span);
document.body.appendChild(div1).appendChild(btn2);
document.body.appendChild(div2);
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Ejercicio 3</title>
</head>
<body>
<button id="btn1" class="boton disminuir"><</button>
<span id="span">1</span>
<button id="btn2" class="boton aumentar">></button>
<script src="api.js"></script>
</body>
</html>