Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.06.2020, 00:53
Новичок на форуме
Отправить личное сообщение для SLIZNUST Посмотреть профиль Найти все сообщения от SLIZNUST
 
Регистрация: 31.05.2020
Сообщений: 5

Как добавить эллемент к списку при нажатии на кнопку
Не могу понять как добавить "Задания" к списку при нажатии на кнопку добавить
<!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("");
		});
Ответить с цитированием
  #2 (permalink)  
Старый 02.06.2020, 04:00
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

$("#block").toggle(); можно удалить, сделав "block" изначально скрытым, и $('#block').show().hide(time);
Ответить с цитированием
  #3 (permalink)  
Старый 02.06.2020, 09:51
Новичок на форуме
Отправить личное сообщение для SLIZNUST Посмотреть профиль Найти все сообщения от SLIZNUST
 
Регистрация: 31.05.2020
Сообщений: 5

Такое задание.
Ответить с цитированием
  #4 (permalink)  
Старый 02.06.2020, 10:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

$('#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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы по картинке при нажатии на определенное место вылезала информация о KazZato Общие вопросы Javascript 1 16.05.2018 08:58
Как сделать чтобы при втором нажатии на кнопку картинка закрывалась? KazZato Общие вопросы Javascript 1 10.05.2018 13:16
Обратный отсчет на js как добавить 0 при значении от 0 до 9 kovalenko3331 Общие вопросы Javascript 2 08.04.2016 08:59
При нажатии на кнопку появляется другой текст ami_moor Общие вопросы Javascript 3 12.06.2015 16:56
При нажатии на кнопку блок двигается с помощью JavaScript LizaYa Общие вопросы Javascript 3 01.04.2015 14:21