Как подставить значение из дата атрибута?

Question

[anmkh]

Условно есть такой код на получение дата атрибутов
Нужно взять из переменной inputPrice значение дата атрибута и вставить в переменную price.
Но в переменной price уже есть значение, поэтому нужно приплюсовать значение из переменной inputPrice.

Допустим:
price = 78 000
inputPrice = 300

При клике на inputPrice в переменной price должно получиться 78 300

const price = document.querySelector('.price-js').dataset.price;

console.log(price)

const inputPrice = document.querySelectorAll('input-js').dataset.price;

inputPrice.forEach((item) => { 
  item.addEventListener('click', handlerItemPrice);
});

function handlerItemPrice() {

}

Comments

[Вадим]

const inputPrice = document.querySelectorAll('input-js').dataset.price;
inputPrice.forEach

И что, как, работает? Ошибок никаких нет?

Условно есть такой код

Лучше чтоб код было конкретный.

Нужно взять из переменной inputPrice значение дата атрибута и вставить в переменную price.

Ну так и в чём сложность? Значения Вы нашли.
Сказать как сделать a = a + b? Или чего?

function handlerItemPrice() {
// Забыли тут свой код написать с которым нужно помочь.
}

[WapSter]

const inputPrice = document.querySelectorAll('input-js').dataset.price;

inputPrice.forEach((item) => {

ты проверь, что тебе возвращает inputPrice, потом попробуй убрать .dataset.price и снова посмотри, что получиться

[anmkh]

WapSter, Ну нодлист возваращает, а как тогда получить атрибут у элемента из коллекции

[WapSter]

anmkh, не работал с массивами?

[anmkh]

WapSter,
Вот сделал по другому, но почему то NaN возвращает

window.addEventListener('click', function (event) {

  if(event.target.hasAttribute('data-price')) {
    console.log('click button')

    const card = event.target.closest('.card-option')
    
    const productInfo = {
      id: card.dataset.id,
      price: card.dataset.price,

    }
    console.log(productInfo )
    calcPrice()
  }
})


function calcPrice() {

  // const inputWrapper = document.querySelector('.cart-js');
  const inputItems = document.querySelectorAll('.card-option');

  let totalPrice = document.querySelector('.price-js');
  console.log(totalPrice)

  inputItems.forEach(function (item) {
    // console.log(item)

    const priceEl = item.querySelector('[data-price]');
    // const price = document.querySelector('[data-total]');

    const currentPrice = parseInt(priceEl.innerText) + parseInt(totalPrice.innerText);
    console.log(currentPrice)

  })
}

[anmkh]

anmkh, вот это возвращает nan

const currentPrice = parseInt(priceEl.innerText) + parseInt(totalPrice.innerText);

[WapSter]

anmkh, ну значит у тебя там не число

[anmkh]

WapSter, parseInt же вроде должен строку в число преобразовывать

[WapSter]

anmkh, а ты смотрел, что там вообще за строка. Вообще подготовь на кодпене демку и тебе на вопросы будут отвечать быстрее на много, мы не знаем, что у тебя там вообще происходит

[anmkh]

WapSter, С тем моментом решил, только теперь он почему то считает все инпуты и складывает. Блин, замучался уже.
Codepen https://codepen.io/perviydesign/pen/yLxoJVv

Answer 1

[ThunderCat]

С тем моментом решил, только теперь он почему то считает все инпуты и складывает. Блин, замучался уже.

Не надо мучиться, надо думать. Странно ожидать от кода чего-либо кроме суммы, если в коде есть только сложение. При каждом клике, не зависимо от того какое значение при клике примет инпут, у тебя плюсуется сумма.

Либо учитывай состояние инпута и отнимай / прибавляй в зависимости от него, либо просто пробегайся по всем инпутам и складывай только с состоянием чекед, удаляя предыдущую сумму.