В настоящее время я пытаюсь очистить поле ввода после добавления задачи в массив

#javascript #input-field

#javascript #поле ввода

Вопрос:

В настоящее время я пытаюсь очистить поле ввода после добавления задачи в массив. я знаю, что это будет очень просто, но, кажется, я не могу найти решение. Буду признателен за любую помощь. Спасибо.

Вот мой код:

HTML:

 <body>

 <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>
  <div>
 <input type="submit" value="Add It!" id="submit" value="reset form">
 </div>
 <div id="output"></div>
 </fieldset>
 </form>
 </body>
 </html>
  

JavaScript:

  var tasks = []; 
 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>';
   message  =  '<ol><li>'; 
   message  =  tasks.join('</li><li>'); 
   message  =  '</li></ol>';

   output.innerHTML = message;

   } 
    return false;
   } 

   function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = addTask 

    frm.submit(); 
    frm.reset();

    return false;
    } 
    window.onload = init;
  

Ответ №1:

Просто очистите значение поля задачи, добавив task.value=»;

Вот полный рабочий код.

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>
      <div>
     <input type="submit" value="Add It!" id="submit" value="reset form">
     </div>
     <div id="output"></div>
     </fieldset>
     </form>
     </body>
     </html>
  

JavaScript:

      var tasks = []; 
     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>';
       message  =  '<ol><li>'; 
       message  =  tasks.join('</li><li>'); 
       message  =  '</li></ol>';
     task.value='';
       output.innerHTML = message;

       } 
        return false;
       } 

       function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = addTask 

        frm.submit(); 
        frm.reset();

        return false;
        } 
        window.onload = init;
  

Ответ №2:

ну, для меня похоже, что вам нужно добавить только 1 строку

 output.innerHTML = message;
task.value = '';
  

Комментарии:

1. Да! это сработало. Как вы, вероятно, можете сказать, я только начинаю javascript. Спасибо за это!