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

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

0 голосов
/ 25 апреля 2018

Я пытаюсь написать программу, чтобы, как только пользователь нажимал «Добавить!» Кнопка, введенная ими строка будет добавлена ​​в изначально пустой массив объекта, а затем этот обновленный массив будет отображен обратно на 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 ]

0 голосов
/ 25 апреля 2018

Вы не должны вызывать или выполнять функцию в 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>
0 голосов
/ 25 апреля 2018

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

    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)
0 голосов
/ 25 апреля 2018

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

В вашем случае вы просто хотите, чтобы при нажатии кнопки запускался 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>
...