Question

我正在解决一个问题，但我无法理解为什么它不起作用。我所要做的就是将输入值存储到数组中，并使用onclick事件处理程序将它们显示到文本框中。有人可以帮帮我吗？

这是我的代码（html，css，javascript）：https://jsfiddle.net/3486kwtn/

只有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 = "";

            }

            }

Answer 1

您正在混合使用jQuery和Javascript语法：

$("show_next_task").onclick这没有意义。

要么使用jQuery（如果使用jQuery，请不要忘记添加它）：

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

或者使用javascript：

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

或者

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

编辑：

我没注意到你有$功能。

小提琴的问题实际上是jsFiddle中的window.onload =..你不需要它，因为脚本部分已经在window.onload中： benchmark

Answer 2

我不确定这是否是正确的方法，但它可以做我需要做的事情：

//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 = "";

                  }

            }

JS：使用onclick事件在文本框中显示数组项？

2 个答案: