За последние 24 часа нас посетили 20480 программистов и 1102 робота. Сейчас ищут 790 программистов ...

Добавление елемента при нажатии на кнопку

Тема в разделе "JavaScript и AJAX", создана пользователем Виктор К., 20 янв 2017.

  1. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Здравствуйте. как можно решить такую задачу: чтобы при нажатии на кнопку (div class="add-food") добавлялся select елемент сначала с name="food2", потом с name="food3" и тд. Буду очень благодарен за решение.
     
  2. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Код (Javascript):
    1. var sel = document.createElement('select'),
    2.     i = 2;
    3. document.getElementById('add-food').addEventListener('click', function() {
    4.     var cloneSel = sel.cloneNode();
    5.     cloneSel.name = 'food' + (i++);
    6.     document.body.appendChild(cloneSel);
    7. });
     
    denis01 и Виктор К. нравится это.
  3. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Спасибо огромное, пойду попробую добавить :)
    --- Добавлено ---
    Извините, но есть еще 4 вопроса:
    1. Можно ли ограничить количество select-ов
    2. Как спаунить их именно над кнопкой add
    3. Как задать Селекту клас
    4. Как рядом с каждым селектом добавлять инпут с таким же номером в класе (например, food-weight2 для 2 селекта)
    Еще раз спасибо :)
     
    #3 Виктор К., 21 янв 2017
    Последнее редактирование: 21 янв 2017
  4. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Код (Javascript):
    1. var sel = document.createElement('select'),
    2.     i = 2,
    3.     limit = 5 + i;
    4. document.getElementById('add-food').addEventListener('click', function() {
    5.     if (i >= limit) {
    6.         return false;
    7.     }
    8.     var cloneSel = sel.cloneNode();
    9.     cloneSel.name = 'food' + (i++);
    10.     cloneSel.classList.add('some-class')
    11.     this.insertAdjacentHTML('beforeBegin', cloneSel.outerHTML);
    12. });
     
    denis01 и Виктор К. нравится это.
  5. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Последняя проблема: нужно чтобы элементы добавлялись внутрь дива с класом food-container. Это возможно?
     
  6. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Ясный красный.
    Код (Javascript):
    1. // вместо
    2. this.insertAdjacentHTML('beforeBegin', cloneSel.outerHTML);
    3. // пишем
    4. document.querySelector('.food-container').appendChild(cloneSel);
    По ходу, всё это уже становится ближе к разделу "Сделайте за меня". Вопросы пошли простейшие, но вы как-то не спешите попробовать найти инфу самостоятельно :cool:
     
    Виктор К. нравится это.
  7. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Извините:( На самом деле было вопросов еще больше, пока решал одни - задавал сюда другие.
     
  8. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Не подскажите еще, пожалуйста, как реализовать удаление, например, блока с class="food2" при нажатии на блок с class="delete-food-2"?
     
  9. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    И при этом у всех блоков цифры после food менялись так, чтобы порядок был правильным (2, 3 , 4 и тд)?