Почему пользовательские входы не помещаются в пустой массив?

Я пытаюсь написать программу, чтобы, как только пользователь нажал "Добавить!" Кнопка, введенная ими строка будет добавлена ​​в изначально пустой массив объекта, а затем этот обновленный массив будет отображен обратно на HTML-странице. Тем не менее, когда я проверял значение массива items при вводе чего-либо, он все равно оказался нулевым. Я вполне уверен, что функция addItem в порядке, проблема в функции updateList?

HTML-код:

<!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:

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());

3 ответа

Решение

Второй аргумент предоставлен addEventListener должен быть функцией. Если вы поместите туда вызов функции, эта функция будет выполнена немедленно, а ее возвращаемое значение будет назначено в качестве обработчика. Но если возвращаемое значение не является функцией, прослушиватель событий не работает.

В вашем случае вы просто хотите getInput запускаться при нажатии кнопки - getInput не является функцией более высокого порядка, поэтому просто передайте саму функцию, а не вызывайте ее:

button.addEventListener('click', getInput);

Как это

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);
<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>

Вы не должны вызывать или выполнять функцию в addEventListener, Вызывающая функция заставляет функцию выполняться немедленно, а не когда событие (click) бывает. Поэтому удалите скобки после имени функции.

+ Изменить button.addEventListener('click', getInput());

к

button.addEventListener('click', getInput);

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);
<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>

Я думаю, вы должны перебрать свой массив. чтобы получить контент:

    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)
Другие вопросы по тегам