2017-11-25 13 views
0

동영상 후에 JavaScript에서 To-do 목록을 반복하기로 결정했으나 비디오가 이미 2 년이 되었기 때문에 일부 속성 또는 다른 내용이 변경되어 depecated되었을 수 있습니다. 나는 모른다.event.target in function이 작동하지 않습니다.

다음
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>To-Do list</title> 
    <link rel="stylesheet" href="main.css"> 
</head> 
<body> 
    <input type="text" id="input"> 
    <button id="btn">Add</button> 

    <hr> 

    <ul id="todo"> 

    </ul> 
    <ul id="done"> 

    </ul> 




    <script src="main.js"></script> 
</body> 
</html> 

자바 스크립트입니다 : 여기 는 HTML입니다도 오류도 결과 전을 : 함수에서

(function() { 
    let input = document.getElementById('input'); 
    let btn = document.getElementById('btn'); 
    let lists = { 
     todo: document.getElementById('todo'), 
     done: document.getElementById('done') 
    }; 

    let makeTaskHtml = function(str, onCheck) { 
     let el = document.createElement('li'); 
     let checkbox = document.createElement('input'); 
     let label = document.createElement('span'); 

     checkbox.type = 'checkbox'; 
     checkbox.addEventListener('click', onCheck); 
     label.textContent = str; 

     el.appendChild(checkbox); 
     el.appendChild(label); 

     return el; 
    }; 


    let addTask = function(list, task) { 
     list.appendChild(task); 
    }; 

    let onCheck = function(event) { 
     let task = event.target; 

     console.log(task); 
    }; 

    addTask(lists.todo, makeTaskHtml('Test-todo')); 
    addTask(lists.done, makeTaskHtml('Test-done')); 


}()); 

onCheck 난 내가 전에이 함수에 정의되어 있지만 아무 일도 작업을 CONSOLE.LOG 시도 예상 되려면 무엇이 문제입니까? 그것은 event.target 때문일 수 있습니까 ??? 또는 addEventListener? 알려 주시면 도와주세요. 당신은 makeTaskHtml를 작동

답변

1

미리 감사는이 개 인수를 취합니다

function makeTaskHtml(str, onCheck) 

을하지만 당신은 단지 하나를 호출 :

addTask(lists.todo, makeTaskHtml('Test-todo')); 

당신은 두 번째 인수로 onCheck 전달하거나 제거해야 함수 선언에서 두 번째 인수

+0

감사합니다. 정말 도움이되었습니다! –