I'm learning JavaScript classes and I want to create an li element with text and a button (the text will be from an input element). The problem is that I can't do it in my method in class because when I const task = this.inputOne.value and after adding it to li.innerHTML, I got undefined. When I console.log every construct value in my method I get undefined, but when I console.log(modulOne.li) outside the class I get the correct li component in console. How do I solve this? Here is my JavaScript code:
class Komponenty {
constructor() {
this.form = document.querySelector("form");
this.inputOne = document.querySelector("input");
this.buttonAdd = document.querySelector("button");
this.ulAdd = document.querySelector("ul");
this.wartosc = this.inputOne.value;
this.li = document.querySelectorAll("li");
}
addTask(e, x) {
e.preventDefault();
const taskValue = this.inputOne.value;
const li = document.createElement("li");
li.className = "task";
li.innerHTML = taskValue + "<button>Usuń</button>";
li.textContent = document.body.appendChild(li);
}
}
const modulOne = new Komponenty();
And here is my HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Projekt - dodawanie zadań - z użyciem tablicy</title>
</head>
<body>
<form action="">
<input type="text">
<button>Dodaj zadanie</button>
</form>
<h1>Liczba zadań: <span>0</span></h1>
<ul></ul>
<script src="main.js"></script>
</body>
</html>