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