Счетчик на js по кликам?

Question

[Данил Ларионов]

Есть ли такая возможность сделать оптимально счетчик товара, к примеру есть счетчик и две кнопки (- 1 +) когда нажимаешь + число увеличивается, нажимаешь - уменьшается, минимальное число 1 максимальное 4, при этом когда на счетчике число меняется оно меняется еще в одном месте, а также число счетчика умножается на определенное число и тоже меняется. Короче что бы было понятнее вот скрины)

Answer 1

[Данил Щучкин]

Находишь кнопку в коде и задаёшь id (атрибут "id="твой любой id")
В js с помощью getElementById("твой id кнопки") добавляешь кнопку в переменную. Точно также делаешь с цифрой которая меняется.


Пример (Updated):

HTML:

<div id="counter">
<input type="button" id="buttonCountPlus" value="+">
<div id="buttonCountNumber">1</div>
<input type="button" id="buttonCountMinus" value="-">
</div>

<div id="calculation">150</div> // 150 просто число для наглядности вычисления

JavaScript:

let calculate = document.getElementById("calculation");
let count = document.getElementById("buttonCountNumber");
calculation = document.getElementById("calculation").innerHTML;

document.getElementById("buttonCountPlus").onclick = function() {
  let countPlus = count.innerHTML;
  if(+countPlus <= 3){
    count.innerHTML++;
    let countPlus = count.innerHTML;
    calculate.innerHTML = calculations(countPlus) ;
  }
}

document.getElementById("buttonCountMinus").onclick = function() {
  let countMinus = count.innerHTML;
  if(+countMinus >= 2){
    count.innerHTML--;
    let countMinus = count.innerHTML;
    calculate.innerHTML = calculations(countMinus) ;
  }
}

calculations = (count) => {
  return calculation+` * ${count} = ` + (+count)*(+calculation);
}

Comments

[Максим]

чёт не работает

[pythonist1234]

Правильно так:

let buttonCountPlus = document.getElementById("buttonCountPlus");
let buttonCountMinus = document.getElementById("buttonCountMinus");
let count = document.getElementById("buttonCountNumber");
let number = 0;

buttonCountPlus.onclick = function() {
    number++;
    count.innerHTML = number;
};

buttonCountMinus.onclick = function() {
   number--;
   count.innerHTML = number;
}:

[Данил Щучкин]

Максим Ленский, спасибо, исправил

[Данил Ларионов]

Отлично, ограничители есть, спасибо, буду работать, как получиться отпишусь)

[Данил Щучкин]

Данил Ларионов, изменил код, добавил результат умножения числа от 1 до 4 на другое число

[Данил Ларионов]

Спасибо, буду обращаться к вам если что))

[pythonist1234]

Да вы издеваетесь. Я ж прислал вам код, делающий такую же вещь в то же время.

[Данил Ларионов]

pythonist1234, я отметил ваше тоже решением)

[pythonist1234]

Спасибо!

Answer 2

[pythonist1234]

Правильно так:

<input type="button" id="buttonCountPlus" value="+">
<input type="button" id="buttonCountMinus" value="-">
<div id="buttonCountNumber">1</div>
<input type="hidden" value="1" id="num" name="num">

let buttonCountPlus = document.getElementById("buttonCountPlus");
let buttonCountMinus = document.getElementById("buttonCountMinus");
let count = document.getElementById("buttonCountNumber");
let count2 = document.getElementById("num");
let number = 1;
let price = 350;

buttonCountPlus.onclick = function() {
    if (number <= 3) {
        number++;
        count.innerHTML = number;
        count2.value = number * price;
    }
};

buttonCountMinus.onclick = function() {
   if (number >= 2) {
       number--;
       count.innerHTML = number;
       count2.value = number * price;
    }
}:

Comments

[Rsvp]

Я бы ещё добавил такой инпут
<input type="hidden" value="">
И туда бы вписывал значение счётчика

[Данил Ларионов]

Спасибо, код оптимальный мне очень нравиться, но вот вопрос, а как можно установить ограничители на счетчик, что бы максимальное значение было 4, а минимальное 1, я пробовал через if (number = 4) { number = number + 0 }
и аналогично с минусом)

[Данил Ларионов]

Rsvp, спасибо, это мне как раз нужно в будущем так сказать, и такой вопрос, как мне воспроизвести функцию как на скриншоте, что бы при увеличении числа в одном месте увеличивались и остальные значения)

[Данил Ларионов]

Хотя по ограничителю уже вопрос решен)

[Данил Ларионов]

Все сделал, остался только один вопрос) если вам не сложно, можете немного помочь с кодом, нужно что бы число помеченное изменялось в зависимости от числа на счетчике) примерно так ( стартовое значение к примеру 350 и при изменении числа на счетчике стартовое значение менялось, когда на счетчике 2 стартовое значение 700, а когда на счетчике 1 стартовое значение 350 и т.д. )
Спасибо)

[pythonist1234]

Поправил, посмотрите.
(У меня ограничение на отправку комментариев, отметьте мой ответ ответом для его снятия, пожалуйста)
(Мне даже пришлось ждать несколько часов, чтобы отправить этот комментарий)

Answer 3

[Ivanitch]

https://prowebmastering.ru/click-counter.html