Why isn't this adding the query?

I have an Add button that’s suppose to display the ticket below the input fields.

document.getElementById('issueInputForm').addEventListener('submit', saveIssue);

function saveIssue(e) {
	var issueDesc = docment.getElementById('issueDescInput').value;
	var issueServerity = document.getElementById('issueSeverityInput').value;
	var issueAssignedTo = document.getElementById('issueAssignedToInput').value;
	var issueId = chance.guid();
	var issueStatus = 'Open';
	
	var issue = {
		id: issueId,
		description: issueDesc,
		severity: issueSeverity,
		assignedTo: issueAssignedTo,
		status: issueStatus
	}
	
	if (localStorage.getItem('issues') == null) {
		var issues = [];
		issues.push(issue);
		localStorage.setItem('issues', JSON.stringify(issues));
	} else {
		var issues = JSON.parse(localStorage.getItem('issues'));
		issues.push(issue);
		localStorage.setItem('issues', JSON.stringify(issues));
	}
	
	document.getElementById('issueInputForm').reset();
	
	fetchIssues();
	
	e.preventDefault();
}


function fetchIssues() {
	var issues = JSON.parse(localStorage.getItem('issues'));
	var issuesList = document.getElementById('issuesList');
	
	issuesList.innerHTML = '';
	
	for (var i = 0; i < issues.lenth; i++) {
		var id = issues[i].id;
		var desc = issues[i].description;
		var severity = issues[i].severity;
		var assignedTo = issues[i].assignedTo;
		var status = issues[i].status;
		
		issuesList.innerHTML += '<div class="well">'+
								'<h6>Issue ID: ' + id + '</h6>' +
								'<p><span class="label label-info">' + status + '</span></p>' +
								'<h3> + desc + '</h3>' +
								'<p><span class="glyphicon glyphicon-time"></span>' + severity + '</p>' +
								'<p><span class="glyphicon glyphicon-user"></span>' + assignedTo + '</p>' +
								'<a href="#" onclick="setStatusClosed(\''+id+'\')" class="btn btn-warning">Close</a>' +
								'<a href="#" onclick="deleteIssue(\''+id+'\')" class="btn btn-danger">Delete</a>' +
								'</div>';
								
	}
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Issue Tracker Application JavaScript Only</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
					<!-- Linked CSS -->
  <link rel="stylesheet" href="style.css" type="text/css">
					<!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body onload="fetchIssues()">
					<!-- Nav Bar -->
	<header>
		<div class="container">
			<div class="row">
				<a href="#" class="logo"><img src="logo.png"></a>
					<nav>
						<ul>
							<li><a href="#">Home</a></li>
							<li><a href="#">Services</a></li>
							<li><a href="#">Clients</a></li>
							<li><a href="#">Team</a></li>
							<li><a href="#">About</a></li>
							<li><a href="#">Contact</a></li>
						</ul>
					</nav>
			</div>
		</div>
	</header>


<div class="container">
	<h1>JS IssueTracker <small>By Wiktor Kredzinski</small></h1>
	<div class="jumbotron">
		<h3>Add New Issue:</h3>
	<form id="issueInputForm">
		
		<div class="form-group">
			<label for="IssueDescInput">Description</label>
			<input type="text" class="form-control" id="issueDescInput" placeholder="Describe The Issue">
		</div>
		
		<div class="form-group">
			<label for="issueSeverityInput">Severity</label>
				<select id="issueSeverityInput" class="form-control">
					<option value="low">
						Low
					</option>
					
					<option value="medium">
						Medium
					</option>
					
					<option value="High">
						High
					</option>
				</select>
		</div>

		<div class="form-group">
			<label for="issueAssignedToInput">Assigned To</label>
			<input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter Responsible...">
		</div>
		
		<button type="submit" class="btn btn-primary">Add</button>
	</form>
		
	</div>
	
	<div class="col-lg-12">
		<div id="issueList">
		
		</div>
	</div>
	
	<div class="footer">
		<p>&copy WiktorKredzinski.com</p>
	</div>
	
</div>



	<script src="http://chancejs.com/chance.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
	<script src="main.js"></script>
</body>
</html>


I am not yet totally familiar with this, but you have a typo, 4th line, docment
If there is something else I am not able to see

And fifth line too. Later you use issueSeverity

There are no typos not on my screen at least when i opened the file its spelled correctly

This is doing the same thing. When I try to search for movie and hit search nothing comes up.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Movie Info</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
					<!-- Linked CSS -->
  <link rel="stylesheet" href="style.css" type="text/css">
					<!-- Bootstrap -->
  <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand" href="index.html">Movie Info</a>
			</div>
		</div>
	</nav>
	
	<div class="container">
		<div class="jumbotron">
			<h3 class="text-center">Search For Movie</h3>
				<form id="searchForm">
					<input type="text" class="form-control" id="searchText" placeholder="Search Movie">
				</form>
		</div>
	</div>
	
	<div class="container">
		<div id="movies" class="row">
		</div>
	</div>




	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="http://chancejs.com/chance.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
	<script src="main.js"></script>
	<script src="main.js></script>
</body>
</html>


$(document).ready(() => {
	$('#searchForm').on('submit', () => {
		let searchText = $('#searchText').val();
		getMovies(searchText);
		e.preventDefault();
		
	});
	
});

function getMovies (searchText) {
	axios.get('http://www.omdbapi.com?s=' +searchText)
	.then((response) => {
		let movies = response.data.Search;
		let output = '';
		$.each(movies, (index, movie) => {
			output += `
				<div class="col-md-3">
					<div class="well text-center">
						<img src="${movie.Poster}">
						<h5${movie.Title}</h5>
						<a onclick="movieSelected('${movie.imdbID}')" class = "btn btn-primary" href="#">Movie Details</a>
					</div>
				</div>
			`;
			
		});
		
		$('#movies').html(output);
	})
	.catch ((err) => {
		
	});
}

function movieSelected(ids) {
	sessionStorage.setItem('movieId', id);
	window.location = 'movie.html';
	return false;
}

function getMovie() {
	let movieId = sessionStorage.getItem('movieId');
		axios.get('http://www.omdbapi.com?i=' +movieId)
	.then((response) => {
	let movie = response.data;
	
	let output = `
		<div class="row">
			<div class="col-md-4">
				<img src="${movie.Poster}" class="thumbnail">
			</div>
			
			<div class="col-md-8">
				<h2>${movie.Title}</h2>
				<ul class="list-group">
					<li class="list-group-item>Genre: ${movie.Genre}</li>
					<li class="list-group-item>Released: ${movie.Released}</li>
					<li class="list-group-item>Rated: ${movie.Rated}</li>
					<li class="list-group-item>IMDB Rating: ${movie.imdbRating}</li>
					<li class="list-group-item>Director: ${movie.Director}</li>
					<li class="list-group-item>Writer: ${movie.Writer}</li>
					<li class="list-group-item>Actors: ${movie.Actors}</li>
				</ul>
			</div>
			
			
		</div>
		
		<div class="row">
			<div class="well">
				<h3>Plot</h3>
				${movie.Plot}
				<hr>
				<a href="http://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-primary">View IMDB </a>
				<a href="index.html class="btn btn-default">Go Back To Search </a>
			</div>
		</div>
	`;
	})
	.catch ((err) => {
		
	});
}

We can only see what you have posted here and there are plenty of typos in that.

Here are some more.

There is no element with the id issuesList, it’s issueList

var issuesList = document.getElementById('issueList');

It is length not lenth, also you will get a TypeError if nothing has been set in localStorage, so you need to check it before trying to use it.

for (var i = 0; i < issues.lenth; i++)

Edit: You have a missing single quote, I would really also suggest using template literals instead of doing concatenation.

'<h3> + desc + '</h3>' +
Should be
'<h3>' + desc + '</h3>' +

This one seems to work