Калькулятор на JS (jQuery)

337

29 июня 2017, 04:46

Здравствуйте, нужно сделать калькулятор по формуле
value1*(value2+value3)

я сделал так, но при вводе например 2*(2+2) должно быть = 8 , а возвращает 44 подскажите в чем проблема?

 jQuery('#value1').bind('input', function() { 
   jQuery("#summ").html(+($(this).val()) *(($("#value2").val()) + +($("#value3").val()))); 
 
}); 
jQuery('#value2').bind('input', function() { 
 jQuery("#summ").html(+($("#value1").val()) *(($(this).val()) + +($("#value3").val()))); 
}); 
jQuery('#value3').bind('input', function() { 
  jQuery("#summ").html(+($("#value1").val()) *(($("#value2").val()) + +($(this).val()))); 
});

.row-flex{ 
  display:flex; 
  flex-flow:row wrap; 
} 
.row-flex label{ 
  display:block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="row-flex"> 
<div><label>Value1</label> <input id="value1" type="text" />*(</div> 
<div><label>Value2</label> <input id="value2" type="text" />+</div> 
<div><label>Value3</label> <input id="value3" type="text" />)</div> 
</form> 
= 
<div class="result"><span id="summ"></span></div>

Answer 1

Читать код труднее, чем писать. Давайте писать так, чтобы было легко читать.

$('#value1, #value2, #value3').bind('input', calcAndShow); 
 
function calcAndShow() { 
  var v1 = parseFloat($("#value1").val()); 
  var v2 = parseFloat($("#value2").val()); 
  var v3 = parseFloat($("#value3").val()); 
 
  $("#summ").html(v1 * (v2 + v3)); 
}

.row-flex{ 
  display:flex; 
  flex-flow:row wrap; 
} 
.row-flex label{ 
  display:block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="row-flex"> 
<div><label>Value1</label> <input id="value1" type="text" />*(</div> 
<div><label>Value2</label> <input id="value2" type="text" />+</div> 
<div><label>Value3</label> <input id="value3" type="text" />)</div> 
</form> 
= 
<div class="result"><span id="summ"></span></div>

Answer 2

Во всех трёх строчках у второго инпута потерялся унарный плюс.
Код надо писать так, чтобы эта строчка была в одном месте, а не в трёх.
Не надо присваивать html, если там не планируется разметки.
У labelов надо бы использовать for или класть инпут внутрь.

$('form').on('input', 'input', function() { 
  $("#summ").text(+$("#value1").val() * (+$("#value2").val() + +$("#value3").val())); 
});

.row-flex { 
  display:flex; 
  flex-flow:row wrap; 
} 
 
.row-flex label { 
  display:block; 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="row-flex"> 
  <div><label for="value1">Value1</label> <input id="value1" type="text" />*(</div> 
  <div><label for="value2">Value2</label> <input id="value2" type="text" />+</div> 
  <div><label for="value3">Value3</label> <input id="value3" type="text" />)</div> 
</form> 
= 
<div class="result"><span id="summ"></span></div>