I am trying to to display JSON data from an external location (3 images with a city name and tagline) onto my HTML page but getting an error: "Uncaught ReferenceError: showPlaces is not defined at places.json:1:1" even though I did define the function already in my JS file.
JSON data: https://www.selicaro.com/webd330/week6/places.json
https://codepen.io/stefan927/pen/MWOqxmN?editors=1111
*<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-
9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="jsonp.css" />
<title>Week 6 | Assignment | JSONP</title>
</head>
<body>
<div class="container">
<h3 class="card-title">
Assignment: Load JSONP from an External Server
</h3>
<form>
<div class="form-group">
<button
type="button"
class="btn btn-primary mx-auto d-block"
id="btn2"
>
Load JSON
</button>
</div>
</form>
<div id="output"></div>
</div>
<!-- Optional JavaScript -->
<script>
(function() {
var btn = document.getElementById('btn2');
btn.addEventListener('click', getJson);
function getJson() {
var output = document.getElementById('output');
output.setAttribute("class", "card-group");
var xhr = new XMLHttpRequest();
var url = 'https://www.selicaro.com/webd330/week6/places.json'
xhr.open('GET', url, true);
xhr.onload = function(data) {
if (this.readyState === 4) {
if (this.status === 200) {
var data = JSON.parse(this.responseText);
function showPlaces(data) {
var content = '';
for (i = 0; i < data.places.length; i++) {
content += '<div class="card" style="width: 20rem;">'
content += '<img class="card-img-top" src=" data.places[i]["img"]
+ '
" alt="
image of city ">';
content += '<div class="card-body">';
content += '<h5 class="card-title">' + data.places[i].loc '</h5>';
content += '<p class="card-text">tagline: ' + data.places[i]
["tagline"] + '</p>';
content += '</div></div>';
}
document.getElementById('output').innerHTML = content;
}
}
}
xhr.send(null);
}
}
})();
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--Your JS files go below this comment-->
<script src="week6.js"></script>
<script src="https://www.selicaro.com/webd330/week6/places.json"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-
cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-
uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
</body>
</html>*
<script src="https://www.selicaro.com/webd330/week6/places.json"></script>