My goal is to develop a simple single-page application without using any frameworks, focusing on providing users with tutorials on specific subjects.
I am encountering an issue with the javascript code for my page, receiving the following error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
Below is the snippet of javascript I am utilizing to fetch and load JSON data:
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
var TutRequest = new XMLHttpRequest();
TutRequest.open('GET', 'https://api.myjson.com/bins/iyvun');
TutRequest.onload = function(){
var TutData = JSON.parse(TutRequest.responseText);
console.log(TutData[2]);
};
TutRequest.send();
})
This is the HTML code used in my project:
<html>
<head>
<meta name="viewport" content="width=devide-width, initial-scale=1"/>
<title>SPA Tutorial page</title>
<link rel="stylesheet" href="css/styles.css">
<script src="javaScript.js"></script>
</head>
<body>
<header>
<h1>SPA tutorials</h1>
<nav role="navigation">
<ul>
<li><a href="#the-default-view"><button id="btn">the default view</button></a></li>
<li><a href="#some-view"><button id="btn2">some view</button></a></li>
<li><a href="#another-view"><button id="btn3">another view</button></a></li>
</ul>
</nav>
</header>
</body>
Despite the expected outcome being the display of JSON data from the specified URL in the JS code, I'm consistently facing this particular error no matter what I attempt. Any assistance or guidance regarding this issue would be greatly appreciated.