As in topic my job is to do a code where user writes some text into textbox and when user hits enter key, the text from the textbox should be added to ul list under Things header. I added also reset button but it's not working because adding elements to list isn't working but I think it should work when I will fix it. I don't know where I made mistake. Could anyone help me or give me advice what should I do?
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1 id="title">List</h1>
<form>
<input type="text" id="user-todo" placeholder="List" required>
</form>
<h2 id="todo-header">Things</h2>
<ul id="list">
</ul>
<button id="clear">Reset</button>
<script>
var input = document.getElementById("user-todo");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// what happens when user hits ENTER
$(document).ready(function() {
$('ul').append("<li>"+($('#user-todo').val()) + "</li>");
});
}
});
function clear() {
document.getElementById("list").innerHTML = '';
}
</script>
</body>
</html>
It looks like you are on an outdated course, you can learn Modern JS at:
https://exploringjs.com/impatient-js/
Dispensing the use of JQuery, a framework that is no longer necessary these days, you get:
const input = document.querySelector("#user-todo");
const clear = document.querySelector("#clear");
const list = document.querySelector("#list");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
const li = document.createElement("li");
li.textContent = input.value;
input.value = "";
list.appendChild(li);
}
});
clear.addEventListener("click", function() {
list.innerHTML = "";
});<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1 id="title">List</h1>
<form onsubmit="return false;">
<input type="text" id="user-todo" placeholder="List" required>
</form>
<h2 id="todo-header">Things</h2>
<ul id="list"></ul>
<button id="clear">Reset</button>
</body>
</html>If you change this line, it should work. https://codesandbox.io/s/exciting-sinoussi-ckw8b?file=/index.html
input.addEventListener("keydown", function (event) {
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1 id="title">List</h1>
<input type="text" id="user-todo" placeholder="List" required>
<h2 id="todo-header">Things</h2>
<ul id="list">
</ul>
<button onclick="clearFunction()">Reset</button>
<script>
function clearFunction() {
document.getElementById("list").innerHTML = " ";
}
var input = document.getElementById("user-todo")
var list = document.getElementById("list");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
var input_val = document.getElementById("user-todo").value;
let li = document.createElement("li");
li.innerText = input_val;
list.append(li);
}
});
</script>
</body>