Передать в textContent input.value

Question

Есть три блока

<div class="block1">
<h2 data-price="1"  class="price">500</h2>
<button data-calculate="1">рассчитать</button>
</div>
<div class="block2">
<h2 data-price="2" class="price">600</h2>
<button data-calculate="2">рассчитать</button>
</div>
<div class="block3">
<h2 data-price="3" class="price">700</h2>
<button data-calculate="3">рассчитать</button>
</div>

И попап открывается один при нажатии на кнопку по одному из блоков

<div class="pop-up">
<input placeholder="введите число" type="number"/>
<button>Сохранить</button>
</div>

Вопрос, как сделать так, чтобы при вводе числа в инпут попапа и нажатии сохранить, менялась цена в том блоке где была нажата кнопка рассчитать? Помогите пожалуйста начинающему кодеру.

Answer 1

В моём примере я провёл операцию сложения, вы же измените её на ту которая вам нужна (Эта строчка: (+num.value) + (+current.innerText), пример операции деления текущего числа, на то которые ввёл пользователь: (+num.value) / (+current.innerText)).

let index = 0,
  num = document.querySelector('#num')

document.querySelectorAll('.block').forEach(e => {
  let btn = e.children[1]
  btn.addEventListener('click', () => {
    hidePop()
    index = btn.dataset.calculate
  })
})

document.querySelector('.pop-up button').addEventListener('click', e => {
  let current = document.querySelector(`h2[data-price="${index}"]`)
  current.innerText = (+num.value) + (+current.innerText)
  hidePop()
})

function hidePop() {
  let pop = document.querySelector('.pop-up')
  pop.style.display = pop.style.display === 'none'
    ? 'block'
    : 'none'
}

.pop-up {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

.pop-up input {
  margin-top: 40vh;
  margin-left: 25vw;
}

<div class="block1 block">
<h2 data-price="1"  class="price">500</h2>
<button data-calculate="1">рассчитать</button>
</div>
<div class="block2 block">
<h2 data-price="2" class="price">600</h2>
<button data-calculate="2">рассчитать</button>
</div>
<div class="block3 block">
<h2 data-price="3" class="price">700</h2>
<button data-calculate="3">рассчитать</button>
</div>

<div class="pop-up" style="display: none">
<input id="num" placeholder="введите число" type="number"/>
<button>Сохранить</button>
</div>

Объяснение:

Тут всё легко, для начала я добавил инпуту в попапе id для удобного селекта в скрипте, ну и конечно для каждого блока добавил класс block. Далее в самом скрипте я объявил две переменные index(Текущий выбранный индекс дива) и само поле, где пользователь вводит число. Далее я выбрал все блоки и добавил каждой кнопке в блоке слушателя события клика, там для начала выполняется функция hidePop которая прячет/показывает попап, а далее сохраняется выбранный индекс в переменную index. После я добавил событие клика на кнопку сохранить в попапе, в котором для начала я сохранил текущий выбранный ценник, потом сложил написанный пользователем ценник с текущей ценой. Вы можете изменить действие которое там происходит, см. выше в ответе. Ну и конечно же нам после этого нужно спрятать попап. В самом конце сама функция hidePop в которой проверка является ли кнопка скрытой или нет, если является то тогда она показывается, иначе она скрывается.

P.S.: по желанию можете в событии клика на кнопку в попапе добавить такую строку в конце функции: num.value = '', которая чистит текущее написанное число.

БЛОГ НА HUSL

Передать в textContent input.value

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

Объяснение: