I've been on the hunt for hours, trying to pinpoint where the issue lies within my code. Despite scouring different resources and sites, I can't seem to figure it out. Whenever I click "Get JSON Data," nothing seems to display below. Can someone take a look at the code and help me identify what I'm doing wrong?
Thanks so much!
$(document).ready(function() {
$('#clickme').click(function(e) {
$.getJSON('data.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'interest-list',
html: items.join('')
}).appendTo('#ajaxjson');
});
e.preventDefault();
});
});<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="scripts/hide_img.js"></script>
<script src="scripts/fadein_out.js"></script>
<script src="scripts/increaseTextSize.js"></script>
<script src="scripts/hideVideo.js"></script>
<script src="scripts/showVideo.js"></script>
<script src="scripts/ChangeHeader.js"></script>
<script src="scripts/eventHover.js"></script>
<script src="ajaxload.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="scripts/form_tooltip.js"></script>
<style>
.mma {
font-size: 75%;
color: ;
}
.important {
font-weight: bold;
font-size: 50px;
}
.blue {
color: blue;
}
</style>
<title>Mixed Martial Arts</title>
</head>
<body>
<header>
<div class="wrapper">
<h1 id="headertext">Mixed Martial Arts<span class="color"></span></h1>
<nav>
<ul>
<li id="hideshowimg"><a href="#">Hide/Show Image</a>
</li>
<li id="increaseText"><a href="#">Increase Text</a>
</li>
<li id="showVideo"><a href="#">Show Video</a>
</li>
<li id="changecolor"><a href="#">Color</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="hero-image">
<div class="wrapper">
<a href="" class="button-1">Fade Out/In</a>
</div>
</div>
<div id="features">
<div class="wrapper">
<ul>
<li class="feature-1">
<h4 class="feature1-heading">What is MMA?</h4>
<p class="mma">MMA is a full-contact combat sport that allows competitors to utilize various grappling and striking techniques against their opponents.</p>
</li>
<li class="feature-2">
<h4>Common Disciplines</h4>
<a href="#" id="clickme">Get JSON Data</a>
<p id="ajaxjson"></p>
<li class="feature-3">
<h4>Competitions</h4>
<p class="mma">There are numerous competitions in which fighters can participate, including Ultimate Fighting Championship (UFC), Pride, CageWars, Clan Wars, and many others. MMA is currently one of the fastest-growing sports in the world!</p>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
<div id="primary-content">
<div class="wrapper">
<article>
<h3>What is MMA?</h3>
<a href="" class="button-video">Hide Video</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PnUmcL07xnY" frameborder="0" allowfullscreen></iframe>
</article>
</div>
</div>
<div id="cta">
<div class="wrapper">
<h3>Contact Form!</h3>
<p>
<form>
First name:
<br>
<input id="txtName" title="Please input your firstname!" type="text" name="firstname">
<br>Last name:
<br>
<input id="txtSurname" title="Please input your lastname!" type="text" name="lastname">
</form>
</p>
<a href="#" class="button-2">Submit</a>
</div>
</div>
<footer>
<div class="wrapper">
<div id="footer-info">
<p>Copyright 2015 Diarmuid Bogner.</p>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>{
"one": "Judo",
"two": "Karate",
"three": "Boxing"
}