Page 1 sur 1

mon bouton pour swiper ne fonctionne pas ... comment faire ?

Posté : 08 juin 2020, 17:17
par thomas625327
HTML :
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ ... ll.min.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<div id="swippe">
<div id="blocs">
<div id="gauche" class="cats"></div>

<div id="mid">
<div id="cats" class="bloc" draggable='true'>
<div id="imgProfil"></div>
</div>
</div>

<div id="droite" class="cats"></div>
</div>
<div class="cat">
<div id="run">
<i class="fas fa-times"></i>
</div>
<div id="like">
<i class="fas fa-heart"></i>
</div>
</div>
</div>

<script src="js/script.js"></script>
</body>

</html>





JS :

/**** Initialisation de l'app ***/
let apiUrl = 'http://4graphik.com/lab/tincat/api/cats/'
let cats = null
let isLoading = true
currentProfil = 0
showProfil()

fetch(apiUrl)
.then(res => res.json())
.then(res => {
cats = res
isLoading = false
showProfil()
})
/**** Initialisation de l'app ***/


// Fonction pour afficher les profils
function showProfil() {
// Si les données ne sont pas encore chargées
if (isLoading) {
console.log('loading...')
// Si les données sont chargées
} else {
// Sélectionner la div avec l'id cats et la vider
let random = Math.floor(Math.random() * cats.length)
document.getElementById("cats").innerHTML = ""
// Sélectionner le premier profil
let img = document.createElement("div")
// Créer un éléement h2
let title = document.createElement("h2")
// Ajouter le nom du profil dans la balise h2
title.innerHTML = cats[random].name
// Créer un élément img
img.classList.add('imgProfil')
// Ajouter la source de l'image
img.style.backgroundImage = `url('${cats[random].path}')`
// Insérer le h2 et l'image dans la div avec l'identitifant cats
document.getElementById("cats").appendChild(img)
document.getElementById("cats").appendChild(title)

}
}




// Fonction pour afficher le profil suivant
function nextProfil() {
// incrémenter la valeur du profil à afficher
number = number + 1;
// Si la valeur du profil actuel est inférieur au nombre de profil total


}

document.getElementById("like").addEventListener("click", function () {
nextProfil();
})

document.getElementById("run").addEventListener("click", function () {
nextProfil();
})