Guntar Wi Guntar Wi - 6 months ago 11
HTML Question

input value to object and then that object push to array

Hollow i have some issue and small problem
i have 3 input fields I need to get values on click from them assign them to object and that object push in to array
can somebody can help ore say where to look info I'm searching on MDN but I can't find correct topic whit examples
1)input value to object and then that object push to array



function $(e) {
return document.querySelector(e);
}

function $$(e) {
return document.querySelectorAll(e);
}

var startBtn = $("send");

startBtn.addEventListener('click', creatTask, false);

function creatTask() {

var addTaskName = $(".task-name"),
addCategory = $(".category"),
addTaskSatus = $(".status");


<!-- task.Taskname = addTaskName.value
task.Category = addCategory.value
task.Status = addTaskSatus.value........... ? -- >

var TaskListArray = [];

var task = {
Taskname: undefined,
Category: undefined,
Status: undefined
}
console.log(task)

}

document.write("message")





Link to jsfiddle with html and javascript

Answer

Try setting id or className selector at var startBtn = $("send"); defining TaskListArray outside of creatTask function; setting values directly at creation of task object; use Array.prototype.push() to add current task object to TaskListArray array.

Also, use window.onload event, or place <script> after elements in html for elements queried in DOM to be loaded in document before creatTask is called or startBtn defined

<script>
  window.onload = function() {
      function $(e) {
        return document.querySelector(e);
      }

      function $$(e) {
        return document.querySelectorAll(e);
      }

      var startBtn = $(".send");

      var TaskListArray = [];

      startBtn.addEventListener('click', creatTask, false);

      function creatTask() {

        var addTaskName = $(".task-name"),
          addCategory = $(".category"),
          addTaskSatus = $(".status");

        var task = {
          Taskname: addTaskName.value,
          Category: addCategory.value,
          Status: addTaskSatus.value
        }

        TaskListArray.push(task)
        console.log(task)

      }
    }
    // document.write("message")
</script>
<input class="task-name" name="task" />
<br>
<input class="category" name="category" />
<br>
<input class="status" name="status" />
<br>
<input type="button" class="send" value="send" />