Na początku uprzedzam, że jestem w bardzo początkowej fazie nauki programowania. W ramach ćwiczeń klas w JavaScript chciałem zrobić sobie podstawową toDoList w JavaScript z użyciem klas. Wedle moich założeń ma się składać z 4 klas: Main.js - do koordynowania pozostałych klas i kolejno klasy pełniący funkcję zgodnie z ich nazewnictwem: AddTask.js, RemoveTask.js, SearchTask.js. Na razie pracuje nad klasami Main.js oraz AddTask.js i tu natknąłem się na problemy. Pytanie pod kodem.
Kod w html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>ToDoList</h1>
<section>
<input type="text">
<button id="start">Add task</button>
</section>
<input type="text" class="search">
<h2>Number of tasks: <span>0</span></h2>
<ul></ul>
<script src="AddTask.js"></script>
<script src="RemoveTask.js"></script>
<script src="SearchTask.js"></script>
<script src="Main.js"></script>
</body>
</html>
Kod w Main.js
class Main {
constructor(){
this.addTask = new AddTask()
this.button=document.getElementById('start')
this.button.addEventListener('click', this.addTask.startGame.bind(this))
this.taskNumber = document.querySelector('h2 span')
this.ul = document.querySelector('body ul')
}
}
const start = new Main()
Kod AddTask.js
class AddTask {
constructor() {
this.toDoList = []
}
startGame() {
const input = document.querySelector('section input')
const titleTask = input.value;
if (titleTask === "") return alert ('You have to write a task!');
const task = document.createElement('li');
task.innerHTML = titleTask + "<button>Delete</button>";
this.toDoList.push(task)
console.log(this.toDoList)
input.value = ""
return toDoList;
}
}
Nie wiem, na tą chwilę, jak zrobić aby:
- Alert 'You have to write a task!' pokazywał się dopiero po kliknięciu, a nie jak teraz po otwarciu html już się pojawia.
- W konsoli w ogóle nie pojawia mi się toDoList którą chciałbym wyświetlić za pomocą console.log.
- Zadania nie są dodawane do toDoList.
- Czy w ogóle w takiej formie ma prawo to działać?
Z góry dzięki za wszelkie wskazówki i odpowiedzi.