Это список задач. Пользователь делает один, введя элемент, а затем нажмите клавишу ввода. Я хотел бы, чтобы элемент ввода отображался сразу после нажатия клавиши ввода, но в действительности происходит то, что все теги (li) отображаются одновременно с текущей введенной клавишей.
<body>
<h1>Create your todo list</h1>
<div>
<input type="text" placeholder="Enter Text Here" id="inputField">
<ul>
<li id="item-one"></li>
<li id="item-two"></li>
<li id="item-three"></li>
<li id="item-four"></li>
<li id="item-five"></li>
<li id="item-six"></li>
</ul>
</div>
<script src="todo-list.js"></script>
</body>
//Using an external file
var textField = document.querySelector("#inputField");
var lists = document.querySelectorAll("li");
textField.addEventListener("keypress", function(e) {
for(let i = 0; i < lists.length; i++){
if (e.key === 'Enter') {
lists[i].style.visibility = "visible";
lists[i].style.fontSize = "16px";
lists[i].textContent = textField.value;
}
}
});
//I have also tried this. The results were the same.
function itemsEntered() {
for(let i = 0; i < lists.length; i++) {
lists[i].style.visibility = "visible";
lists[i].style.fontSize = "16px";
lists[i].textContent = textField.value;
}
}
textField.addEventListener("keypress", function(e) {
if(e.key === "Enter") {
itemsEntered();
}
});
Каждый пользователь вводит данные вхранить в теге (li) и отображать по отдельности.