CODEWITHSUNDEEP
javascript
ebyrock
ebyrock

Reputation: 71

JS: Display array item in textbox with onclick event?

I am working on a problem but I cannot figure it why it's not working. All I am trying to do is store input values into array and show them into a textbox with onclick event handler. Could anyone help me please?

Here is my code (html, css, javascript): https://jsfiddle.net/3486kwtn/

Only Javascript:

//FUNCTION
            var $ = function (id) {
                return document.getElementById(id);
            }

//ONLOAD EVENT HANDLER
            window.onload = function () {
            var taskList = [];
            var newTask = $("new_task");
            var scr = $("task_list");
            var nextTask = $("next_task")

            $("add_task").onclick =
                function () {
                    taskList.push(newTask.value);
                    scr.innerHTML = taskList.join("\n");
                    clear();
                }

                $("show_next_task").onclick =
                    function () {
                        nextTask.push(scr.value);
                        nextTask.innerHTML = taskList;
                        taskList.shift(); }

            function clear() {
                newTask.value = "";

            }

            }

Upvotes: 2

Views: 408

Answers (2)

ebyrock
ebyrock

Reputation: 71

I am not sure this is the proper way to do it but it does what i need to do:

//FUNCTION
            var $ = function (id) {
                return document.getElementById(id);
            }

//ONLOAD EVENT HANDLER
            window.onload = function () {
            var taskList = [];
            var newTask = $("new_task");
            var scr = $("task_list");
            var nextTask = $("next_task");

            $("add_task").onclick =
                function () {
                    taskList.push(newTask.value);
                    scr.innerHTML = taskList.join("\n");
                    clear();
                 }

                $("show_next_task").onclick =
                  function () {
                    nextTask.value = taskList[0];
                    taskList.shift();
                  }

            function clear() {
                newTask.value = "";

                  }

            }

Upvotes: 0

Saar
Saar

Reputation: 2306

You are mixing jQuery and Javascript syntax:

$("show_next_task").onclick this doesn't make sense.

Either you use jQuery (if you use jQuery don't forget to add it):

$("#show_next_task").on("click", function(){
// do something here
});

Or use javascript:

document.getElementById("show_next_task").onclick = function(){
// do something here
}

Or

document.getElementById("show_next_task").addEventListener("click",function(evt){
// do something here
},false);

EDIT:

I didn't notice you have a $ function.

The problem with your fiddle was actually the window.onload =.. in jsFiddle you don't need it as the script part is already in the window.onload: http://jsfiddle.net/3486kwtn/8/

Upvotes: 3

Related Questions