2017-02-28 1 views
1

내 선생님이 정확히 무엇을 의미합니까? HTML에 대한 경험이 거의 없으므로 어떻게해야할지 모르겠습니다. 양식 요소 없이는 작동을 멈추지 않을까요? "양식 요소를 제거하고 고유 한 ID로 div를 넣으십시오 닫는 div 요소 잊지 마세요  작업 삭제를위한 두 번째 단추 추가"제출 "유형을" 버튼 "을 누르고 각자 고유 한 ID를 부여하십시오." 양식을 더 이상 사용할 수 없습니다 때문에양식 요소를 제거하고 그 자리에 고유 ID가있는 div를 넣으시겠습니까?

(function(){ 
 
    
 
\t // Variable that stores the tasks: 
 
    var tasks = []; 
 

 
\t // Function called when the form is submitted. 
 
\t // Function adds a task to the global array. 
 
    function addTask() { 
 
     'use strict'; 
 
     var task = document.getElementById('task'); 
 
     var output = document.getElementById('output'); 
 
     var message = ''; 
 

 
     if (task.value) { 
 
      tasks.push(task.value); 
 
      message = '<h2>To-Do</h2><ol>'; 
 
      for (var i = 0, count = tasks.length; i < count; i++) { 
 
       message += '<li>' + tasks[i] + '</li>'; 
 
      } 
 
      message += '</ol>'; 
 
      output.innerHTML = message;   
 
     } // End of task.value IF. 
 

 
\t  // Return false to prevent submission: 
 
     return false; 
 

 
    } // End of addTask() function. 
 

 
    // Initial setup: 
 
    function init() { 
 
     'use strict'; 
 
     document.getElementById('theForm').onsubmit = addTask; 
 
    } // End of init() function. 
 
    window.onload = init; 
 

 
})();
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>To-Do List</title> 
 
    <!--[if lt IE 9]> 
 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
    <![endif]--> 
 
    <link rel="stylesheet" href="css/form.css"> 
 
</head> 
 
<body> 
 
    <!-- Script 6.5 - task.html --> 
 
    <form action="#" method="post" id="theForm"> 
 
     <fieldset><legend>Enter an Item To Be Done</legend> 
 
      <div><label for="task">Task</label><input type="text" name="task" id="task" required></div> 
 
      <input type="submit" value="Add It!" id="submit"> 
 
\t \t  <div id="output"></div> 
 
     </fieldset> 
 
    </form> 
 
    <script src="js/todo.js"></script> 
 
</body> 
 
</html>

+0

이/todo.js_ – Satpal

답변

0

당신은 클릭에로 onsubmit에서 이벤트를 변경해야합니다.

(function(){ 
 
    
 
\t // Variable that stores the tasks: 
 
    var tasks = []; 
 

 
\t // Function called when the form is submitted. 
 
\t // Function adds a task to the global array. 
 
    function addTask() { 
 
     'use strict'; 
 
     var task = document.getElementById('task'); 
 
     var output = document.getElementById('output'); 
 
     var message = ''; 
 

 
     if (task.value) { 
 
      tasks.push(task.value); 
 
      message = '<h2>To-Do</h2><ol>'; 
 
      for (var i = 0, count = tasks.length; i < count; i++) { 
 
       message += '<li>' + tasks[i] + '</li>'; 
 
      } 
 
      message += '</ol>'; 
 
      output.innerHTML = message;   
 
     } // End of task.value IF. 
 

 
\t  // Return false to prevent submission: 
 
     return false; 
 

 
    } // End of addTask() function. 
 

 
    // Initial setup: 
 
    function init() { 
 
     'use strict'; 
 
     document.getElementById('submit').onclick = addTask; 
 
    } // End of init() function. 
 
    window.onload = init; 
 

 
})();
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>To-Do List</title> 
 
    <!--[if lt IE 9]> 
 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
    <![endif]--> 
 
    <link rel="stylesheet" href="css/form.css"> 
 
</head> 
 
<body> 
 
    <!-- Script 6.5 - task.html --> 
 
    <form action="#" method="post" id="theForm" 
 
     <fieldset><legend>Enter an Item To Be Done</legend> 
 
      <div><label for="task">Task</label><input type="text" name="task" id="task" required></div> 
 
      <input type="submit" value="Add It!" id="submit"> 
 
\t \t  <div id="output"></div> 
 
     </fieldset> 
 
    </form> 
 
    <script src="js/todo.js"></script> 
 
</body> 
 
</html>

+0

기다립니다 _js의 코드를 공유하기 때문에 변화는 단지 j.s 코드에서 만들어진 :

이 시도? –

+0

예, onsubmit 이벤트는 양식 요소에서만 사용할 수 있으므로 버튼의 클릭 이벤트로 변경해야합니다. –

관련 문제