Как автоматически изменить значение в plus/minus buttons при достижении определённых условий

Question

Простите мою некомпетентность, я не специалист в java script (и вообще не программист), но хочу разобраться. Помогите, пожалуйста, голову сломал уже. Задача, вроде, простая.

Есть вот такая тестовая страничка на Тильде: http://project32344.tilda.ws/page27794948.html В левой части выбор кол-ва элементов, в средней наверху - общее кол-во, в средней внизу - сумма, которая получается перемножением общего кол-ва на цену (price), указанную в правой части при помощи значения в plus/minus buttons. Это всё стандартные элементы Тильды.

Задача: при достижении определённого общего кол-ва нужно автоматически менять цену, общая сумма, соответственно, должна пересчитываться. Вручную всё работает. Правая часть со значением цены (price) потом будет как-то скрываться. Используется plus/minus, а не что-то другое, т.к. встроенный калькулятор "видит" значения только так или ещё при использовании ползунка с кол-вом. Если проще/иначе можно сделать - хорошо.

Код:


$(document).ready(function() {

var articles = ['1000','800'];

document.querySelector(".t-input-block").addEventListener("click", callreload);

function callreload(){ 
    
    var quantity = document.querySelector("input[name='quantity']").value;
    
      if (quantity<=3){
          reloadprice(articles[0]);
      }else{
          reloadprice(articles[1]);
      };
};


function reloadprice(a){
    document.querySelector("input[name='price']").value = var a;
};

});

</script>

Answer 1

$(document).ready(function() {

  var articles = ['1000', '800'];

  document.querySelectorAll(".t-input-block").forEach((el) => el.addEventListener("click", callreload));

  function callreload() {

    var quantity = document.querySelector("input[name='quantity']").value;

    if (quantity <= 3) {
      reloadprice(articles[0]);
    } else {
      reloadprice(articles[1]);
    };
  };


  function reloadprice(a) {
    document.querySelector("input[name='price']").setAttribute("value", a)
  };

});

Answer 2

В inputs записываются значения атрибутов name этих инпутов:

.

В articles записываете цены, что будут меняться по условию, либо записываете вручную.
inputPrice - инпут, откуда берётся цена для подсчёта цены в вашем калькуляторе, туда же будет выводится цена из price.
textCount - число в "общее количество", по которому считается условие

Далее вешается обработчик input (ввод значений) на все input[name="inputs[]"], а так же обработчик click (нажатие) на кнопки - и + рядом с инпутом.

Функция в обработчиках одна и так же - ChangePrice().
В ней мы получаем общее кол-во товаров (переменная count), а далее выставляем inputPrice значение value по условию.

var inputs = ['quantity_red', 'quantity_green', 'quantity_blue'],
    articles = [1000, 800],
    inputPrice = document.querySelector('.t-input[name="price"]'),
    textCount = document.querySelector('.t-calc[data-calc-expr="quantity_red + quantity_green + quantity_blue"]');

inputs.forEach(function(name, i) {
  var input = document.querySelector(`.t-input[name="${name}"]`),
      btns = input.parentElement.querySelectorAll('.t-inputquantity__btn');
  input.addEventListener('input', ChangePrice);
  btns.forEach(function(btn) {
    btn.addEventListener('click', ChangePrice);
  });
});

function ChangePrice() {
  var count = Number(textCount.innerText.trim());

  if(count <= 3)
    inputPrice.value = articles[0];
  else 
    inputPrice.value = articles[1];
}

Код проверял на сайте через консоль, работало в FF отлично.

БЛОГ НА HUSL

Как автоматически изменить значение в plus/minus buttons при достижении определённых условий

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