I am using ajax to retrieve some data from json. When I put script inside the HTML it works just fine, but when I perform ajax request from JS file it doesn't work. Not sure why. I have checked that json file is in the same directory as all other files. Plus my HTML file includes the right path to my JS file. Below is the code with script within html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Project.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src = "Project.js"></script>
</head>
<body>
<div id="div1">
<strong><p id="loved">Secret code</p></strong>
<button id="button6">click me</button>
</div>
<script>
//ajax call to retrieve json file on everydayuse page ( that works fine)
$("#button6").click(function() {
$.ajax({
type:"GET",
url:"package.json",
dataType:"json",
success:function(result) {
$("#div1").html("");
$("#div1").append("Use code to receive free shipping:" + "<h3 style='color:deeppink'>"+ result.name+
"</h3>" + "By:" + "<h3 style='color: deeppink'>"+result.date+ "</h3>");
}
});
});
</script>
</body>
</html>