<body>
<div class="main">
<h1>ToDoList</h1>
<form>
<input type="text" placeholder="새로운 할 일" name="todo">
<button type="submit"><b>추가</b></button>
</form>
<div class="todolist">
</div> </div> <script>
init();
function init(){
let input = document.querySelector('input');
let ul = document.querySelector('ul');
document.querySelector('form').addEventListener('submit', function(e){e.preventDefault();
addTask();
input.value = '';
input.focus();}) //입력창 비워주기});
ul.addEventListener('click', function(e){
if(e.target.className == 'delete')
e.target.parentNode.remove();});
function addTask(){
let li = document.createElement('li');
li.innerHTML = `<span class="delete">x</span><label>${input.value}</label>`;
ul.appendChild(li);
}
}
</script>
작동이 잘되다가
위 코드에서 addTask 함수안에 let li = document.createElement('li'); 를 밖으로 꺼내서
init 함수안에 선언하니 작동이 안됩니다
addTask 함수를 없애고 풀어봐도
let li = document.createElement('li');
li.innerHTML = `<span class="delete">x</span><label>${input.value}</label>`;
이 두줄 사이에 한문장이라도 들어오면 작동이 이상해지는데
함수안에선 변수선언 어디에서 해도 전부 호이스팅 되는줄알았는데
왜안되는지 너무궁금합니다
자기가 속해있는 상위함수안에 변수를 선언하면 되야할거같은데
안되네요 ㅠ
도와주세요 선생님 ..
