Estoy aprendiendo clases de JavaScript y quiero crear un elemento li con texto y un botón (el texto será de un elemento de entrada). El problema es que no puedo hacerlo en mi método en clase porque cuando const task = this.inputOne.value y después de agregarlo a li.innerHTML , no estoy definido. Cuando console.log . registro cada valor de construcción en mi método, obtengo undefined , pero cuando console.log(modulOne.li) fuera de la clase, obtengo el componente li correcto en la consola. ¿Cómo puedo solucionar esto? Aquí está mi código JavaScript:
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();Y aquí está mi 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>