Как сделать чтобы при вводе в поле input определенного слова изменялась сумма?

Question

[Alex Lav]

Добрый день!
Помогите сделать что-то типо скидочных купонов
Например есть поле input у которого переменная id="kup"
И есть текст <p id="summ">299</p>
Нужно чтобы при вводе определенного текста (пусть будет KUPON) в поле с переменной id="kup" число на сайте у которого переменная Id="summ" уменьшалось на 150
Проще говоря, ввел в поле слово KUPON и вместо 299, стало 149

Comments

[longclaps]

Не согласен. Число 299 постоянное.

[Alex Lav]

Я имею в виду, что вместо 299 может быть абсолютно любое число

[origami1024]

Нужно больше данных, например, почему сейчас она не изменяется?

[longclaps]

Алексей Лавринов, ты, наверное, хочешь сказать "переменная", но забыл это слово. Вспоминай быстрей.

[Alex Lav]

longclaps, описал ситуацию подругому, теперь понятнее?)

[longclaps]

Алексей Лавринов, ты опять забыл слово "переменная". Проклятый склероз!

[DanKud]

Основа должна быть примерно такая, а дальше уже сами доделывайте, что вам нужно:
https://codepen.io/DanKud/pen/LYPxRNp?editors=1010

[origami1024]

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

[Alex Lav]

DanKud, Спасибо все как нужно))

Answer 1

[Daria Motorina]

Повесить на инпут для ввода купонов слушатель события input , как только текст в этом инпуте станет таким, что надо - в этом же обработчике поменять значение инпута с суммой

Answer 2

[ThunderCat]

Купоны и скидки так не делаются, во всяком случае правильно так не делаются.

Comments

[Alex Lav]

Если подлатать этот код то делаются, мне нужна была основа дальше я доделаю.

[ThunderCat]

Алексей Лавринов, без серверной составляющей все это будет сплошная лажа

[DanKud]

ThunderCat, тут даже дело не столько в сервере, проверять то данные при любом раскладе нужно на сервере, а дело в том, что если проверять купоны в режиме реального времени напрямую из JS, то и хранить список купонов нужно в JS на клиенте :)

[Сергей c0re]

DanKud,

то и хранить список купонов нужно в JS на клиенте

это чревато банальным хаком из консоли браузера. а в режиме реального времени проверять можно через Ajax запросы к серверной части.

Answer 3

[fallus]

var sumContainer = document.querySelector('#summ');
  sumContainer.setAttribute('data-original-price', sumContainer.textContent); // Сохраняем оригинальную цену в аттрибут
  document.querySelector('#kup').addEventListener('input', function(){
    if(this.value.toLowerCase() == 'kupon'){
      sumContainer.textContent = sumContainer.textContent * 1 - 150
    } else {
      sumContainer.textContent = sumContainer.getAttribute('data-original-price')
    }
  })