I'm having a problem getting data from my fetch response into a div. The data comes into the console just fine, but I can't get it to update the div.
<html lang="">
<head>
<meta charset="UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="phand">
<button id="deal" class="btn">Deal!</button>
</div>
<script type="text/javascript" src="{% static 'blackjack/play.js' %}"></script>
</body>
</html>
(function () {
function deal() {
fetch('/deal')
.then(response => response.json())
.then(data => {
console.log(data)
var card1Rank = data[0];
var card1Suit = data[1];
var card2Rank = data[2];
var card2Suit = data[3];
$("#phand").append('<acidjs-xdeck-card rank=' + card1Rank + 'suit=' + card1Suit + '></acidjs-xdeck-card>');
});
};
$('#deal').on('click', function() {
deal();
});
}());
I want the javascript to insert the response from the fetch request into the "phand" element on the page, but it does nothing.