Search jQuery

jQuery Forum

Addition and Multiplication help

in Using jQuery • 10 years ago

Hello all,

Currently this script is outputting the exact mathematical calculations I need it to perform. Can someone show me how to change these from simply outputting formulas to actually executing them?

Current example output: "Values added together and multiplied by the variable: 4 + 6 X 5"

Desired output: "Values added together and multiplied by the variable: 50"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.22.custom.css">
<script>
$(function() {
var valueMultiplier = '5';
$( "#slider" ).slider({
value:1,
min: 1,
max: 12,
step: 1,
slide: function( event, ui ) {
if(ui.value > 1){
$( "#amount" ).val( + ui.value );
$( "#amountthree" ).val($("#amount").val() + " + " + $("#amounttwo").val() + "");
$( "#amountfour" ).val($("#amount").val() + " + " + $("#amounttwo").val() + " X " + valueMultiplier);
}else{
$( "#amount" ).val( + ui.value + " month" );
$( "#amountthree" ).val($("#amount").val() + " + " + $("#amounttwo").val() + "");
$( "#amountfour" ).val($("#amount").val() + " + " + $("#amounttwo").val() + " X " + valueMultiplier);
}
}
});
$( "#amount" ).val($( "#slider" ).slider( "value" ));
$( "#slidertwo" ).slider({
value:1,
min: 3,
max:36,
step: 3,
slide: function( event, ui ) {
if(ui.value > 1){
$( "#amounttwo" ).val( + ui.value);
//$( "#amountthree" ).val( + ui.value + PREVIOUS SLIDER UI VALUE HERE + " months" );
$( "#amountthree" ).val($("#amount").val() + " + " + $("#amounttwo").val() + "");
$( "#amountfour" ).val($("#amount").val() + " + " + $("#amounttwo").val() + " X " + valueMultiplier);
}else{
$( "#amounttwo" ).val( + ui.value + " month" );
$( "#amountthree" ).val($("#amount").val() + " + " + $("#amounttwo").val() + "");
$( "#amountfour" ).val($("#amount").val() + " + " + $("#amounttwo").val() + " X " + valueMultiplier);
}
}
});
$( "#amounttwo" ).val($( "#slidertwo" ).slider( "value" ));
$( "#amountthree" ).val($( "#slidertwo" ).slider( "value" ) + $( "#slider").slider( "value" ));
$( "#amountfour" ).val($( "#slidertwo" ).slider( "value" ) + $( "#slider").slider( "value" ) + " X " + valueMultiplier);
});
</script>
</head>
<body>
<p>
<label for="amount">Value One?:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider"></div>
<p>
<label for="amounttwo">Value Two?:</label>
<input type="text" id="amounttwo" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slidertwo"></div>
<p class="holder">Values added together: <input type="text" id="amountthree" style="border:0; color:#f6931f; font-weight:bold;" /> </p>
<p class="holder">Values added together and multiplied by the variable: <input type="text" id="amountfour" style="border:0; color:#f6931f; font-weight:bold;" /> </p>
</body>
</html>

Replies(4)

kbwood.au

Re: Addition and Multiplication help

10 years ago

Try this:

$(function() {
function updateAmounts() {
var value1 = $('#slider').slider('value');
var value2 = $('#slidertwo').slider('value');
$('#amount').val(value1);
$('#amounttwo').val(value2);
$('#amountthree').val(value1 + value2);
$('#amountfour').val((value1 + value2) * valueMultiplier);
}
var valueMultiplier = 5;
$('#slider').slider({value: 1, min: 1, max: 12, step: 1, slide: function(event, ui) {
updateAmounts();
});
$('#slidertwo').slider({value: 1, min: 3, max: 36, step: 3, slide: function(event, ui) {
updateAmounts();
}});
updateAmounts();
});

brandonpe..

Re: Addition and Multiplication help

10 years ago

Thank you VERY much!

Your code seems to be missing one } in the first .slider call, just FYI. I tried it and it performs the math calculations correctly, but now the sliders seem broken.

The first slider is meant to go from 1-12. It starts at 1, and when you drag it one increment to the right, it shows up as "1" still. Drag it another increment to "3" and it shows up as "2." Drag it all the way to the right and it will turn to "11" (should be 12) and then drag it one to the left and it turns into 12.

Any idea on how to fix that bug? Otherwise it's totally perfect. I had no idea how simple this script could be made! Quite amazing.

I tried re-arranging the order of a few things to no avail, as well as adding back in the manual "$( "#amount" ).val( + ui.value );" calls before the updateAmounts() triggers and still nothing. =(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.22.custom.css">
<script>
$(function() {
function updateAmounts() {
var value1 = $('#slider').slider('value');
var value2 = $('#slidertwo').slider('value');
$('#amount').val(value1);
$('#amounttwo').val(value2);
$('#amountthree').val(value1 + value2);
$('#amountfour').val((value1 + value2) * valueMultiplier);
}
var valueMultiplier = 5;
$('#slider').slider({value: 1, min: 1, max: 12, step: 1, slide: function(event, ui) {
updateAmounts();
}});
$('#slidertwo').slider({value: 1, min: 3, max: 36, step: 3, slide: function(event, ui) {
updateAmounts();
}});
updateAmounts();
});
</script>
</head>
<body>
<p>
<label for="amount">Value One?:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider"></div>
<p>
<label for="amounttwo">Value Two?:</label>
<input type="text" id="amounttwo" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slidertwo"></div>
<p class="holder">Values added together: <input type="text" id="amountthree" style="border:0; color:#f6931f; font-weight:bold;" /> </p>
<p class="holder">Values added together and multiplied by the variable: <input type="text" id="amountfour" style="border:0; color:#f6931f; font-weight:bold;" /> </p>
</body>
</html>

kbwood.au

Re: Addition and Multiplication help

10 years ago

The trouble is that the slider value is not updated as part of the slide event. If you change these to the stop event instead it works correctly.

$('#slider').slider({value: 1, min: 1, max: 12, step: 1, stop: function(event, ui) {
updateAmounts();
}});
$('#slidertwo').slider({value: 3, min: 3, max: 36, step: 3, stop: function(event, ui) {
updateAmounts();
}});

brandonpe..

Re: Re: Addition and Multiplication help

10 years ago

Thank you! For the help and especially the explanation!

Top Reply

Response title

Attachments

jQuery Forum

Addition and Multiplication help

Replies(4)

Re: Addition and Multiplication help

Re: Addition and Multiplication help

Re: Addition and Multiplication help

Re: Re: Addition and Multiplication help

Statistics

Tags

Actions