0

class ToDo{
	
	inputToDo(){
		this.list = document.createElement('div');
		this.list.className = 'list';
		this.creat = document.getElementById('out');
		this.creat.append(this.list);
		this.but = "<li class='li-bottom'><button id='del'>Закрыть</button></li>";
		this.result = "<ul><li><h2>" + this.title + "</h2></li>" + "<li>" + this.txt + "</li>" + this.but;
		this.list.innerHTML = this.result;
		if(document.getElementById('del').onclick){
			alert("sdf");
		}
	}
	
	checkText(){
		this.textCount = 530;
		this.titlCount = 27;
		this.title = document.getElementById('titl').value;
		this.txt = document.getElementById('txt').value;
		
		if(this.title.length <= this.titlCount && !this.title.length == 0){
			if(this.txt.length <= this.textCount && !this.txt.length == 0){
				this.inputToDo();
			}else{
				alert('Задача не должена превышать ' + this.textCount + ' символов и не должен ровняться нулю');
			}
		}else{
			alert('Заголовок не должен превышать ' + this.titlCount + ' символов и не должен ровняться нулю');
		}
	}
	
	deletToDo(){
		this.list.remove();
	}
}

window.onload = function(){
	var todo = new ToDo();
	
	document.getElementById('push').onclick = function(){
		todo.checkText();
	}
	
	document.getElementById('del').onclick = function(){
		todo.deletToDo();
	}
}
html,
body{
	padding: 0;
	margin: 0;
	background-color: #15502f;
}

header{
	display: flex;
	justify-content: center;
	border-bottom: 1px solid black;
}

header h1{
	color: white;
	text-shadow: 0 4px 3px black;
}

main{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.inp{
	padding: 30px;
	width: 100%;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid gray;
}

.inp form{
	width: 303px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.inp textarea{
	resize: none;
    text-align: center;
}

form input{
	margin: 20px;
	text-align: center;
}

.out{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.list{
	width: 300px;
	height: 400px;
	background-color: white;
	margin: 25px;
	box-shadow: 0 5px 10px black;
}


.list:hover{
	box-shadow: 0 0 25px black;
	transition: all .1s ease-in;
}

ul{
	list-style: none;
	padding: 0;
	margin-top: 0;
}

.list li{
	text-align: center;
}

.li-bottom{
	border-top: 1px solid black;
	display: flex;
	justify-content: center;
	padding-top: 15px;
}

li:nth-child(1){
	height: 27px;
	margin-top: 10px;
	margin-bottom: 10px;
}
li:nth-child(2){
	height: 288px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ToDo</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <header>
      <h1>ToDo List</h1>
    </header>
    <main>
      <section class="inp">
        <form method="#" action="#">
          <input placeholder="Заголовок" type="text" id="titl">
          <textarea rows="10" cols="40" placeholder="Задача" id="txt"></textarea>
          <input value="Добавить" type="submit" id="push">
        </form>
      </section>
      <section class="out" id="out">
        
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

2 ответа 2

3

Элемент с id='del' создается при каждом вызове метода inputToDo.

В приведенном коде указанный метод нигде не вызывается, следовательно в любой момент времени document.getElementById('del') будет возвращать null.

0

В момент вызова

document.getElementById('del').onclick = function(){
    todo.deletToDo();
}

элемента[ов] с id='del' не существует. Не говоря уже о том, что Вы их создаете больше одного.

1
  • Почему не существует если даже сама кнопка появляется при создании элемента? Создаю 1
    – narem
    Commented 3 июл. 2019 в 11:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.