We are creating a todolist using ATOM (a super introductory course [for beginners] where you can understand the basics of JavaScript in an hour - everyone follows engineer/Kyotoshi Yamaura).
When I listed and displayed what I entered in the form field, I linked ul and li, but I got an error saying ul is null and the characters I entered in the form are not listed.Here is the actual code.Even on youtube, the HTML ul was left blank.Also, this person uses const, but he uses var from the error indication related to ES6.
Thank you for your cooperation.
*index.html*
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<metacharset="utf-8">
<title>ToDo List</title>
</head>
<body>
<div>
<h1>ToDo List</h1>
<style>
h1 {text-align:center; color:rgba(195,64,16,0.83); font-family:fantasy; font-size:80px;}
</style>
<form id="form" name="form">
<input id="input" placeholder="Things to do" type="text">
</form>
<style>
# form {text-align:center;}
</style>
<script src="index.js">
</script>
<ul class="list-group text-secondary" id="ul">/ul>
</div>
</body>
</html>
*index.js*
var form = document.getElementById("form");
var input = document.getElementById("input");
variable= document.getElementById("ul");
form.addEventListener("submit", function(event){
event.preventDefault();
add();
});
function add(){
var li = document.createElement("li");
li.innerText=input.value;
li.classList.add("list-group-item");
ul.appendChild(li);
input.value="";
}
<script src="index.js">
</script>
<ul class="list-group text-secondary" id="ul">/ul>
Before the browser reads the element id="ul", index.js runs, and the result of document.getElementById("ul") is null.
Place the document.getElementById("ul") line in add(), replace <script> and <ul> above, or change the entire index.js to inside the Decode>
© 2024 OneMinuteCode. All rights reserved.