Суммировать value при нажатии на кнопку

278
10 декабря 2021, 21:10

Подскажите пожалуйста, кто разбирается

Есть поле <input value="50">

И есть 3 отдельных элемента

<div class="price_1">1</div><button id="price_1">Добавить</button>
<div class="price_2">2</div><button id="price_2">Добавить</button>
<div class="price_3">3</div><button id="price_3">Добавить</button>

Как сделать, чтобы при нажатии на любую кнопку button, в поле <input value="50"> добавлялась цена, написанная в блоках price_1, price_2, price_3

И если нажать кнопку повторно - убиралась

        function addition1() { 
            var a = parseInt(document.getElementById('a').value); 
            var b = parseInt(document.getElementById('b').value); 
            if (isNaN(a)==true) a=0; 
            if (isNaN(b)==true) b=0; 
  
            var s = a + b; 
             
            var obj=document.getElementById("result"); 
            obj.value=s; 
        } 
 
        function addition2() { 
            var a = parseInt(document.getElementById('a').value); 
            var c = parseInt(document.getElementById('c').value); 
            if (isNaN(a)==true) a=0; 
            if (isNaN(c)==true) b=0; 
  
            var s = a + c; 
             
            var obj=document.getElementById("result"); 
            obj.value=s; 
        } 
 
        function addition3() { 
            var a = parseInt(document.getElementById('a').value); 
            var d = parseInt(document.getElementById('d').value); 
            if (isNaN(a)==true) a=0; 
            if (isNaN(b)==true) b=0; 
  
            var s = a + d; 
             
            var obj=document.getElementById("result"); 
            obj.value=s; 
        }
    <input id="b" type="text" value="10"> <input type="button" value="a+b" onclick="addition1();"><br> 
    <input id="c" type="text" value="20"> <input type="button" value="a+c" onclick="addition2();"><br> 
    <input id="d" type="text" value="30"> <input type="button" value="a+d" onclick="addition3();"><br> 
 
    <form> 
        <input id="a" type="text" value="100"> 
        <input id="result" value=""> 
    </form>

Answer 1

Думаю правильно понял задачу.

Придётся чутка поправить вёрстку..
Остальное описано в комментариях к коду.

p.s. код на jQuery.

let input = $('#total_price'); 
 
$('button').on('click', function(){ 
  let price = parseInt($('.'+$(this).attr('id')).text()), // раз класс "цены" и ид кнопки совпадает, то будем это использовать. 
      check = $(this).attr('data-check'), // для проверки, типо "вкл\выкл" 
      altText = $(this).attr('data-alt-text'); // будем менять текст на кнопке. 
 
  // изменяем данные кнопки 
  $(this)  
    .attr({  
      'data-check': (check == 1 ? 0 : 1), // заменим "статус" активации 
      'data-alt-text': $(this).text() // поменяем местами название кнопки 
    }) 
    .text(altText); // относится к смене названия местами 
   
  // дальше меняем цену в инпуте 
  let val = parseInt(input.val()); // получаем текущую цену 
  input.val(check == 1 ? (val - price) : (val + price)); // есть "добавить", то + к цене, если "убрать", то минус. 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="total_price" type="text" value="50" readonly> 
<hr> 
<div class="price_1">1</div> 
<button id="price_1" data-check="0" data-alt-text="Убрать">Добавить</button> 
<br> 
<div class="price_2">2</div> 
<button id="price_2" data-check="0" data-alt-text="Убрать">Добавить</button> 
<br> 
<div class="price_3">3</div> 
<button id="price_3" data-check="0" data-alt-text="Убрать">Добавить</button>

По поводу ответа @Anton Shchyrov:

..Я состояние храню классом. Бонусом этого - можно еще изменять внешний вид кнопки

Используя атрибут data-*** тоже можно изменять дизайн кнопки)

let input = $('#total_price'); 
 
$('button').on('click', function(){ 
  let price = parseInt($('.'+$(this).attr('id')).text()), 
      check = $(this).attr('data-check'), 
      altText = $(this).attr('data-alt-text'); 
 
  $(this).attr({'data-check': (check == 1 ? 0 : 1), 'data-alt-text': $(this).text()}).text(altText); 
  let val = parseInt(input.val()); 
  input.val(check == 1 ? (val - price) : (val + price)); 
});
button[data-check] { 
  display: inline-block; 
  padding: 8px 10px; 
  border: none; 
  border-radius: 3px; 
  color: #fff; 
  cursor: pointer; 
  transition: all .2s linear; 
} 
 
button[data-check]:hover { 
  opacity: .85; 
  box-shadow: 0 0 3px 1px rgba(0,0,0,.35); 
} 
 
button[data-check="0"] { 
  background: green; 
} 
 
button[data-check="1"] { 
  background: red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="total_price" type="text" value="50" readonly> 
<hr> 
<div class="price_1">1</div> 
<button id="price_1" data-check="0" data-alt-text="Убрать">Добавить</button> 
<br> 
<div class="price_2">2</div> 
<button id="price_2" data-check="0" data-alt-text="Убрать">Добавить</button> 
<br> 
<div class="price_3">3</div> 
<button id="price_3" data-check="0" data-alt-text="Убрать">Добавить</button>

Answer 2

Для начала зачем вам три идентичных функции, если можно использовать одну, передавая ей аргументом, что мы нажали.

Далее, вам нужно хранить состояние кнопки (нажата/отжата) и при нажатии определять нужно складывать или вычитать значение. Я состояние храню классом. Бонусом этого - можно еще изменять внешний вид кнопки

function addition(btn) { 
  var res = document.getElementById("result"); 
  var a = parseInt(res.value); 
  var b = parseInt(btn.previousElementSibling.value); 
  if (isNaN(a) === true) { 
    a = parseInt(document.getElementById("a").value); 
    if (isNaN(a) === true) 
      a = 0; 
  } 
  if (isNaN(b) === true) b = 0; 
 
  res.value = (btn.classList.contains('pressed')) ? a - b : a + b; 
 
  btn.classList.toggle('pressed'); 
}
.pressed { 
  color: blue; 
}
<input id="b" type="text" value="10"> <input type="button" value="a+b" onclick="addition(this);"><br> 
<input id="c" type="text" value="20"> <input type="button" value="a+c" onclick="addition(this);"><br> 
<input id="d" type="text" value="30"> <input type="button" value="a+d" onclick="addition(this);"><br> 
 
<form> 
  <input id="a" type="text" value="100"> 
  <input id="result" value=""> 
</form>

Answer 3
  1. Как при повторном клике убирать значение не придумал :((

let button = document.querySelectorAll('button'); 
let input = document.querySelector('input'); 
let d = input.value; 
 for(let i = 0; i < button.length; i++){ 
    button[i].addEventListener('click', function(e){ 
      input.value = event.target.closest('.b').querySelectorAll('.price')[i].innerHTML; 
      console.clear(); 
      console.log( +d + +input.value ) 
    })     
}
<input value="50"> 
<div class="b"> 
  <div class="price_1 price" >1</div><button id="price_1">Добавить</button> 
  <div class="price_2 price">2</div><button id="price_2">Добавить</button> 
  <div class="price_3 price">3</div><button id="price_3">Добавить</button> 
</div>

READ ALSO
Javascript. Обнуление переменных в цикле
javascript

Javascript. Обнуление переменных в цикле

Есть код, который проходится по заказам и получает суммы за определенный периодСейчас 3 периода

 77
Пустое значение в заявке
javascript

Пустое значение в заявке

Кто может подсказать в чем причина? Когда нажимаю кнопку отправить, полученное значение становится NaN

 82
Правильно ли в приложении используются глобальные переменные?
javascript

Правильно ли в приложении используются глобальные переменные?

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

 92
Что значит строчка кода?
javascript

Что значит строчка кода?

Есть код, который при вводе в input прерывает вызов функции callSearch, если после последнего ввода символа не прошло 2х секунд, помогите разобраться...

 189