Question

我正在尝试编写一个程序，以便用户点击“添加！”后按钮，他们键入的字符串将添加到对象中最初为空的数组，然后该更新的数组将显示在HTML页面上。但是，当我在输入内容时检查items数组的值是什么时，它仍然显示为null。我相当确定addItem函数没问题，是updateList函数中的问题吗？

HTML CODE：

<!DOCTYPE html>
<html>
<head>
    <title>Homework 5</title>
    <!--<link rel="stylesheet" type="text/css" href="index.css">-->
    <script src="toDoList.js"></script>
</head>
<body>
    <h1>Homework 5: JS Objects & HTML DOM</h1>
    <div id="input">
        <input id="userInput" type="text" placeholder="Type a word">
        <button id="submit">Add</button>
    </div>

    <div id="output"></div>

    <h1>Design</h1>
    <h1>Challenges</h1>
</body>
</html>

JAVASCRIPT CODE：

var button = document.getElementById("submit");

var toDoList = {
    items: [],
    add: addItem,
    update: updateList
};

function addItem(string) {
    toDoList.items.push(string);
}

function updateList() {
    var output = document.getElementById("output");
    output.innerHTML = toDoList.items;
}

function getInput() {
    var input = document.getElementById("userInput").value;
    toDoList.add(input);
    toDoList.update();

    //clearing the text field for next use
    document.getElementById("userInput").innerHTML = "";
}

button.addEventListener('click', getInput());

Answer 1

提供给addEventListener的第二个参数需要是一个函数。如果在其中放置函数 invocation ，则立即执行该函数，并将其返回值指定为处理程序。但如果返回值不是函数，则事件监听器不起作用。

在您的情况下，您只需要在单击按钮时运行getInput - getInput不是高阶函数，所以只需传递函数本身，而不是调用它： / p>

button.addEventListener('click', getInput);

喜欢这个

＆＃13;

var button = document.getElementById("submit");

var toDoList = {
  items: [],
  add: addItem,
  update: updateList
};

function addItem(string) {
  toDoList.items.push(string);
}

function updateList() {
  var output = document.getElementById("output");
  output.innerHTML = toDoList.items;
}

function getInput() {
  var input = document.getElementById("userInput").value;
  toDoList.add(input);
  toDoList.update();

  //clearing the text field for next use
  document.getElementById("userInput").innerHTML = "";
}

button.addEventListener('click', getInput);

＆＃13;

<h1>Homework 5: JS Objects & HTML DOM</h1>
<div id="input">
  <input id="userInput" type="text" placeholder="Type a word">
  <button id="submit">Add</button>
</div>

<div id="output"></div>

<h1>Design</h1>
<h1>Challenges</h1>

＆＃13;

Answer 2

您不应在addEventListener中调用或执行该功能。调用函数会导致函数在事件（click）发生时立即执行。因此，在函数名称后删除括号。

更改button.addEventListener('click', getInput());

要

button.addEventListener('click', getInput);

＆＃13;

var button = document.getElementById("submit");

var toDoList = {
    items: [],
    add: addItem,
    update: updateList
};

function addItem(string) {
    toDoList.items.push(string);
}

function updateList() {
    var output = document.getElementById("output");
    output.innerHTML = toDoList.items;
}

function getInput() {
    var input = document.getElementById("userInput").value;
    toDoList.add(input);
    toDoList.update();

    //clearing the text field for next use
    document.getElementById("userInput").innerHTML = "";
}

button.addEventListener('click', getInput);

＆＃13;

<h1>Homework 5: JS Objects & HTML DOM</h1>
    <div id="input">
        <input id="userInput" type="text" placeholder="Type a word">
        <button id="submit">Add</button>
    </div>

    <div id="output"></div>

    <h1>Design</h1>
    <h1>Challenges</h1>

＆＃13;

Answer 3

我想，你必须遍历你的数组。获取内容：

    var x = ['apple','banana','orange'];
    var output = "";
    for (i=0;i<x.length;i++) {
       output += x[i];
    }
    alert(output);  //--> outputs applebananaorange
    alert(x.items); //--> undefined (whats your case)

为什么不将用户输入放入空数组？

3 个答案: