Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2019, 14:01
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 409

Шаблон, события, изменение значения
Есть шаблон, например:

<div id="template">
     <div id="myVal">0<div>
     <input id="btn" type="button">
</div>

Этот шаблон будет добавляться на страницу
десяток раз.
При нажатии на кнопку #btn конкретного экземпляра шаблона
значение div#myVal этого экземпляра шаблона будет меняться
скажем на 1.
(Я понимаю, что id уникален в пределах страници и
наверное вместо id нужно юзать class)
Как это грамотно реализовать?
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2019, 14:03
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

в чем проблема сделать класс?
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2019, 14:59
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,737

У вас в верстке ошибка.

<button type="button" class="add-new-template">Add new template</button>
<div class="template">
  <div class="value">0</div>
  <input class="button increase-value" type="button" value="Click me">
</div>

<script>
var template = document.querySelector('.template').cloneNode(true);

document.body.addEventListener('click', function (e) {
    if (!!e.target && e.target.classList.contains('increase-value')) {
        e.target.parentNode.querySelector('.value').textContent++;
    }
});

document.querySelector('.add-new-template').addEventListener('click', function () {
    document.body.appendChild(
        template.cloneNode(true)
    );
});
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение значения input[number] отдельными кнопками Greendumb Общие вопросы Javascript 10 20.01.2017 18:33
изменение в стилях в зависимости от значения VGreen Events/DOM/Window 1 12.12.2016 20:00
Изменение значения кастомизированного select'а babbetta Events/DOM/Window 3 29.05.2016 17:36
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
Динамическое изменение значений диаграммы в зависимости от значения ползунков Volchen0ck Events/DOM/Window 8 23.04.2014 13:15