결과물

주요 코드

<div class="row5"><button class="hidden" onclick="getTextFile()">수달의 비밀일기 보기</button></div>
<div class="diary" id="hide">
	<div class="date">수달의 비밀 일기</div>
	<div class="main" id="hidden-diary"></div>
</div>


<script>
  function getTextFile(){
	var input = document.createElement("input");
	input.type="file";
	input.accept="input/plain";
	input.onchange=function(event){
		processFile(event.target.files[0]);
	};
	input.click();
	}
  function processFile(file){
	var reader = new FileReader();
	reader.readAsText(file,"utf-8");
	reader.onload= function(){
		document.getElementById("hide").style.display="block";
		document.getElementById("hidden-diary").innerText=reader.result;
	};
  }
</script>

//css
#hide{
  display:none;

javascript 해석

<script>
  function getTextFile(){
	var input = document.createElement("input"); input태그 요소를 하나 만들고 해당 요소의이름을 input이라고 이름 붙인다.
	input.type="file"; 
	input.accept="input/plain"; <input type="file" accept="text/plain"/>이라는 html코드와 같아진다.
	input.onchange=function(event){ input태그에 변화개 생겼을때
		processFile(event.target.files[0]); processFile이라는 함수가 실행된다.
	};
	input.click(); input을 클릭한다(변화시킴)
	}
  function processFile(file){
	var reader = new FileReader(); 파일을 읽을 수 있는 reader라는걸 만든다.
	reader.readAsText(file,"utf-8"); reader는 file을 utf-8형식으로 읽는다.
	reader.onload= function(){ reader가 파일을 읽으면
		document.getElementById("hide").style.display="block"; hide라는 id를가진 요소의 style의 display를 "block"으로 바꾼다.
		document.getElementById("hidden-diary").innerText=reader.result; id가 "hidden-diary"인 요소의 텍스트를 reader의 결과값으로 대체한다.
	};
  }
</script>