Как сослаться на data-art при написании функции?

Question

Отрабатываю на макете то, что не могу понять уже долгое время: Есть 3 счётчика, у каждого по "+", "-" и полю для вывода

window.onload = function(){   //при загрузке страницы
  loadCounters();   //загружаю счётчики на страницу
}
function loadCounters(){   //загружаю счётчики на страницу
    $.getJSON('counters.json', function (data) {  ///выгружаю файл json
      var counters = data;
      var out = '';
      for (var key in data){   ///отрисовываю тело каждого счётчика
          out+='<div class="field_main" data-art="'+key+'">';
          out+= '<button class="minus" data-art="'+key+'">-</button>';
          out+= '<input type="number" value="0" class="field" data-art="'+key+'">';
          out+= '<button class="plus" data-art="'+key+'">+</button>';
          out+='</div>';
      }
      document.querySelector('.body').innerHTML = out;   //вывожу каждый счётчик в body
      $('plus').on('click', addToCounter);   //по клику на "+" срабатывает "addToCounter"
  })
}

function addToCounter() {   //+1 в input с тем же data-art
    var btn = $(this).attr('data-art');
    var field = $(input).attr('data-art');
    field.innerHTML.value++;
    console.log(field);  
    loadCounters();
  }

Не могу понять как сослаться на input с тем же data-art, что и button. И да, я знаю что налажал с value, но суть в том, что он мне даже console.log не выводит, поэтому основная проблема с тем, как взять нужный нам input по data-art.

Answer 1

function loadCounters(){   //загружаю счётчики на страницу
  $.getJSON('counters.json', function (data) {  ///выгружаю файл json
    var counters = data;
    var out = '';
    for (var key in data){   ///отрисовываю тело каждого счётчика
      out+='<div class="field_main" data-art="'+key+'">';
      out+= '<button class="minus" data-art="'+key+'">-</button>';
      out+= '<input type="number" value="0" class="field" data-art="'+key+'">';
      out+= '<button class="plus" data-art="'+key+'">+</button>';
      out+='</div>';
    }

    /* ОШИБКА: Выполняется поиск элемента с CSS классом body */
    /* document.querySelector('.body').innerHTML = out;   //вывожу каждый счётчик в body */

    /* ИСПРАВЛЕНО: Ищем элемент body */
    document.querySelector('body').innerHTML = out;   //вывожу каждый счётчик в body

    /* ОШИБКА: Тега plus не существует */
    /* $('plus').on('click', addToCounter);   //по клику на "+" срабатывает "addToCounter" */

    /* ИСПРАВЛЕНО: Делаем выборку по имени класса */
    $('.plus').on('click', addToCounter);   //по клику на "+" срабатывает "addToCounter"
  })
}

function addToCounter() {   //+1 в input с тем же data-art

  /* Зачем нужна эта строка, если переменная btn нигде не используется? */
  var btn = $(this).attr('data-art');

  /* ОШИБКА: Переменная input не определена */
  /* var field = $(input).attr('data-art'); */

  /* Найти первый элемент input и поместить в переменную значение его свойства data-art */
  var field = $('input').attr('data-art');

  /* ОШИБКА:
  В переменной field содержится значение свойства data-art, а не ссылка
    на элемент input. Поэтому попытка обратиться к свойству innerHTML
    вызывает ошибку, ведь у строки не может быть такого поля.
  Свойство innerHTML возвращает так же строку и у нее не может быть
    поля value.
  */
  field.innerHTML.value++;

  console.log(field);

  /*
    Зачем нужна эта строка я не могу даже представить, т.к. даже если код
      выше сработает и изменит значение счетчиков, то вызов этой функции
      заново загрузит данные из counters.json и полностью перезапишет
      innerHTML у body, используя данные из подгруженного файла.
  */
  loadCounters();
}

Вот так будет работать

function addToCounter(event) {

  // Получить имя счетчика
  const counterName = $(this).attr('data-art')

  // Получить ссылку на нужный элемент input
  const counterInput = document.querySelector(`input[data-art="${counterName}"]`)

  // Увеличить значение счетчика
  counterInput.value++
}

БЛОГ НА HUSL

Как сослаться на data-art при написании функции?

Ответы (1 шт):