After conducting some experiments, I finally cracked the code. It turns out that placing the javascript ABOVE the html caused querySelector to overlook your next/prev buttons, resulting in the variables holding them actually being set as null. By simply relocating the javascript to the bottom, this issue was resolved for me.
Alternatively, enclosing your javascript in window.onload = function() will also address the problem.
<html>
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.nav{
width: 100%;
position: fixed;;
left: 0;
height:15%;
top:0px;
font-size:15px;
z-index:1000;
}
.a{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color:rgb(90, 76, 76);
}
...
// (Continues with styling rules)
...
</script>
</body>
</html>