<div id="contenedor" class="container "> <button id="empezar" class="btn btn-success">Empezar</button> <p id="mensaje"></p> <button id="carta" class="btn btn-success">Sacar una carta</button> <button id="carta5" class="btn btn-success">Sacar cinco cartas</button> <div id="cartas"></div> </div> <script src="js/test.js"></script>
document.getElementById('empezar').addEventListener('click', empezar) document.getElementById('carta').addEventListener('click', carta) document.getElementById('carta5').addEventListener('click', cartas) let baraja function carta () { fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=1') .then(function (response) { return response.text() }) .then(function (html) { console.log(html) const resultado = JSON.parse(html) console.log(resultado) const imagen = document.createElement('img') imagen.src = resultado.cards[0].image document.getElementById('cartas').appendChild(imagen) }) .catch(function (err) { console.log('Error: ', err) }) } function empezar () { fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1') .then(function (response) { return response.text() }) .then(function (html) { console.log(html) const resultado = JSON.parse(html) console.log(resultado) baraja = resultado.deck_id document.getElementById('mensaje').innerHTML = 'Tienes la baraja: ' + baraja }) .catch(function (err) { console.log('Error: ', err) }) } function cartas () { fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=5') .then(function (response) { return response.text() }) .then(function (html) { const resultado = JSON.parse(html) for (let i = 0; i < resultado.cards.length; i++) { const imagen = document.createElement('img') imagen.src = resultado.cards[i].image document.getElementById('cartas').appendChild(imagen) } }) .catch(function (err) { console.log('Error: ', err) }) }