Ejemplo fetch cartas

<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/cartas.js"></script>

document.getElementById('empezar').addEventListener('click', empezar)
document.getElementById('carta').addEventListener('click', () => {
  cartas(1)
})
document.getElementById('carta5').addEventListener('click', () => {
  cartas(5)
})

let baraja

function empezar () {
  fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
    .then(response => response.json())
    .then(json => {
      console.log(json)
      baraja = json.deck_id
      document.getElementById('mensaje').innerHTML =
        'Tienes la baraja: ' + baraja
    })
    .catch(err => {
      console.log('Error: ', err)
    })
}
function cartas (num) {
  fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=' + num)
    .then(response => response.json())
    .then(json => {
      console.log(json)
      for (let i = 0; i < json.cards.length; i++) {
        const imagen = document.createElement('img')
        imagen.src = json.cards[i].image
        document.getElementById('cartas').appendChild(imagen)
      }
    })
    .catch(err => {
      console.log('Error: ', err)
    })
}