Форум

SLIZNUST · #1 (**permalink**) 02.06.2020, 00:53

Не могу понять как добавить "Задания" к списку при нажатии на кнопку добавить

<!DOCTYPE html>
<html lang="ru">
<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>JavaScript</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<h1>Список дел</h1>
<form class="" action="index.html" method="post">
  <input type="text" name="list-items" placeholder="задание">
</form>
  <br>
  <button id="add"  >Добавить</button>
  <button id="show">Отобразить</button>
<div id="block">
Эллемент был добавлен
</div>
<ol></ol>

$("#block").toggle();
$('#add').click(function() {
      			$('#block').toggle();
            $('#block').hide(3000);

      		});
$('#show').click(function() {
  var toAdd = $('input[name=list-items]').val();
  if(toAdd == "")
  return false;
  $('ol').append('<li>' + toAdd + '</li>');
			$('input[name=list-items]').val("");
		});

laimas · #2 (**permalink**) 02.06.2020, 04:00

И в чем смысл кнопки Отобразить, если охота добавлять по кнопке Добавить, а добавляется кнопкой Отобразить?

$("#block").toggle(); можно удалить, сделав "block" изначально скрытым, и $('#block').show().hide(time);

SLIZNUST · #3 (**permalink**) 02.06.2020, 09:51

Такое задание.

laimas · #4 (**permalink**) 02.06.2020, 10:07

Я не понимаю таких заданий. Если нужно добавлять кнопкой Добавить, значит код прописанный для кнопки Отобразить должен быть перемещен в обработчик кнопки Добавить, а обработчик кнопки Отобразить что-то показывать, что не знаю.

$('#block').hide(3000); - как такое для пользователя, неужто удобный эффект? Наверное разумнее показать, отобразить t секунд, затем быстро скрыть? Все это можно сделать одной кнопкой, причем скрыть/показать сообщение посредством dispalay none, это плохо, почему попробуйте догадаться сами.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var toAdd = $('input[name=list-items]').focus(function() {
        this.value = ''
    }), block = $('#block').css({opacity: 0}), ol = $('ol');

    $('#add').click(function() {
        if(!$.trim(toAdd.val())) return;
        block.css({opacity: 1}).delay(1000).animate({opacity: 0}, 300);
        $('<li/>', {text: toAdd.val()}).appendTo(ol);
    });    
});
</script>
</head>
<body>
<input type="text" name="list-items" placeholder="задание">
<button id="add">Добавить</button>

<div id="block">
Эллемент был добавлен
</div>

<ol></ol>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript