常連

冒頭のonloadでtitle変数にidがtitleのdiv要素を入れています。
しかし、新規作成ボタン→タイトル本文入力→保存ボタン→全削除と操作すると、207行目からのonclick内で、title要素が空になっているようで、titleに入れた要素を操作できません。
alert(title)としてみても真っ白なアラートボックスが表示されるだけです。
おそらくスコープ？のせいかとも考えたのですが、何度調べてみてもよくわかりませんでした。
onclick内でtitle内にtitleのdiv要素が入っていない原因を教えていただけますでしょうか？
よろしくお願いいたします。

実行環境は最新版のchromeです。
```javascript
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>メモ帳</title>
	<link rel="manifest" href="./manifest.json">
	<script>
	  // service workerが有効なら、service-worker.js を登録します
	  if ('serviceWorker' in navigator) {
		navigator.serviceWorker.register('./sw.js').then(function() { console.log('Service Worker Registered'); });
	 }
	</script>
	<style type="text/css">
		body{
			display: flex;
			margin: 0px;
		}
		#leftBoard{
			width: 40vw;
			height: 100vh;
			color:#000;
			background: #aaa;
		}
		#rightBoard{
			width: 60vw;
			height: 100vh;
			color: #000;
			background: #cc0;
			border: solid 1px;
		}
		#newCreate{
			display: block;
			margin: auto;
		}
		#titleBox{
			border: solid 1px;
			display: none;
		}
		#reserve{ 
			display: none;
		} 
		#contextBox{
			width: 98%;
			height: 90%;
			margin-top: 10%;
			border: solid 1px;
			display:none;
		}
		#edit{
			display: inline;
			margin: auto;
		}

		/*
		div>.test{
			color: #ff0;
			background: #00f;
			padding: 20px;
			border: solid 1px #0f0;
			text-align: center;
		}

		*/
	</style>

	<script>
		let title;
		window.onload = function(){
			// const note = document.getElementById('note');
			// const memo = document.getElementById('memo');
			const newCreate = document.getElementById("newCreate");
			const titleBox = document.getElementById("titleBox");
			const contextBox = document.getElementById("contextBox");
			const reserve = document.getElementById("reserve");
			const note = document.getElementById("note");
			title = document.getElementById("title");
			const context = document.getElementById("context");
			const memo = document.getElementById("memo");
			const list = document.getElementById("list");
			numbering = 0;
			content = [];
			titleAry = [];
			count = 0;
			formatChange = function(mode){		
				titleBox.style.display = mode;
				reserve.style.display = mode;
				contextBox.style.display = mode;
			}
			writing = function(a){
				memo.innerHTML += '<div style="display: flex;">' + '<div class="listTitle" data-inputId="'+ count +'">' + a + '</div>' + '<input class="edit" type="button" value="編集" data-inputId="'+count+'">' + '</div>';	
				listTitle = document.getElementsByClassName("listTitle");
				for(let i = 0; i < numbering; i++){
				listTitle[i].addEventListener('click', function(){
				count = listTitle[i].getAttribute("data-inputId");
				title.innerText = titleAry[count];
				context.innerText = content[count];
				});
				};
			}
			
			title.style.display = "block";
			context.style.display = "block";
			newCreatefx = function(){
				if(reserve.style.display != "block"){
					titleBox.value = "";
					contextBox.value = "";
					formatChange("block");
					title.style.display = "none";
					context.style.display = "none";
					count = numbering;
					numbering++;
				console.log("count:" + count + "numbering:" + numbering);
				};
			}
			reservefx = function(){
				let currentTitle = titleBox.value;
				let currentContext = contextBox.value;
				formatChange("none");
				title.innerText = currentTitle;
				context.innerText = currentContext;
				title.style.display = "block";
				context.style.display = "block";
				if(document.querySelectorAll("input[data-inputId='"+count+"']").length==0){
					writing(currentTitle);
					edit = document.getElementsByClassName('edit');
				}else{
					listTitle = document.getElementsByClassName("listTitle");
					for(let i = 0; i < numbering; i++){
					listTitle[i].addEventListener('click', function(){
					count = listTitle[i].getAttribute("data-inputId");
					title.innerText = titleAry[count];
					context.innerText = content[count];
					});
					};
					// accessTitle = document.getElementById("listTitle" + count);
					// accessTitle.innerHTML = currentTitle;
				};
				titleAry[count] = titleBox.value;
				content[count] = contextBox.value;
				// let editAry = Array.prototype.slice.call(edit);
				for(let i = 0; i < numbering; i++){
					edit[i].addEventListener('click', function(){
						count = edit[i].getAttribute("data-inputId");
						titleBox.value = titleAry[count];
						contextBox.value = content[count];
						formatChange("block");
						title.style.display = "none";
						context.style.display = "none";
					});
				};
				localStorage.setItem("numberingData", numbering);
				// localStorage.setItem("countData", count);
				titleReserve = titleAry.join();
				localStorage.setItem("titleData", titleReserve);
				contentReserve = content.join();
				localStorage.setItem("contentData", contentReserve);
				localStorage.setItem("memoData", memo.innerHTML);
			}

			if(window.localStorage){
				console.log("localStorage:ok");
			}
			if(window.sessionStorage){
				console.log("sessionStorage:ok");
			}
			console.log(localStorage.getItem("titleData"));
			console.log(localStorage.getItem("contentData"));
			console.log(localStorage.getItem("memoData"));
			// console.log(localStorage.getItem("contentData"));
			// console.log(localStorage.getItem("contentData"));
			if(!localStorage.getItem("titleData")){
				titleReserve = "";
			}else{
				titleReserve = localStorage.getItem("titleData");				
			}
			if(!localStorage.getItem("contentData")){
				contentReserve = "";
			}else{
				contentReserve = localStorage.getItem("contentData");
			}
			titleAry = titleReserve.split(",");
			content = contentReserve.split(",");
			memo.innerHTML = localStorage.getItem("memoData");
			edit = document.getElementsByClassName('edit');
			console.log(edit);
			numbering = localStorage.getItem("numberingData");
			for(let i = 0; i < numbering; i++){
				edit[i].addEventListener('click', function(){
					count = edit[i].getAttribute("data-inputId");
					titleBox.value = titleAry[count];
					contextBox.value = content[count];
					formatChange("block");
					title.style.display = "none";
					context.style.display = "none";
				});
			};
		}
	</script>
</head>

<body>
	<div id="leftBoard">
		<div id="tool" style="display: flex">
			<input id="newCreate" type="button" value="新規作成" onclick="
				newCreatefx();
			"><input id="allDelete" type="button" value="全削除" onclick="
				numbering = 0;
				title.innerHTML = '';
				context.innerText = '';
				titleAry = [];
				content = [];
				memo.innerHTML = '';
				localStorage.removeItem('numberingData');
				localStorage.removeItem('titleData');
				localStorage.removeItem('contentData');
				localStorage.removeItem('memoData');
				console.log(title);
			">
		</div>
		<div id="list">
			<div style="display: flex;">
				<div id="memo" style="background: #ff7f50;width:100%;"></div>
			</div>
		</div>
	</div>
	<div id="rightBoard">
		<div class="nextTo" style="display: flex;">
			<input id="titleBox" type="text">
			<input id="reserve" type="button" value="保存" onclick="
				reservefx();
			">
		</div>
			<textarea id="contextBox"></textarea>
		<div id="note">
			<div id="title" style="background: #b0d4de"></div>
			<div id="context"></div>
		</div>
	</div>

	
</body>
</html>
```

質問編集履歴