javascript - using if statements with input values jquery - Stack Overflow

admin管理员组

文章数量:1430054

I have a short script that calculates a number by multiplying input values. That script works fine but now I want to add if statements. For example:

HTML:

<label>Width</label><input type="text" id="width" />
<br>
<label>Length</label><input type="text" id="length" />
<br>
<label>Total</label><input type="text" id="total"/>

JavaScript:

var w = $('#width').val();
var l = $('#length').val();
var total1 = 2;
var total2 = 3;    
if((w * l) > 5){
    total = total1 * (w + l);
    parseInt($('#total').val('total'));
}
if((w * l) < 5){
    totalnew = total2 * (w + l);
    parseInt($('#total').val(totalnew));
}

So if (#width x #length) > 5, the value of (#width x #length) would be multiplied by a certain number, in this case "2".

Tried to figure it out on jsfiddle.

Here is the code that works without the if statements: /

How can I implement what I am looking to achieve with the if statements with the code I already have?

EDIT: How can I add more than one if statement? I tried this: /

I have a short script that calculates a number by multiplying input values. That script works fine but now I want to add if statements. For example:

HTML:

<label>Width</label><input type="text" id="width" />
<br>
<label>Length</label><input type="text" id="length" />
<br>
<label>Total</label><input type="text" id="total"/>

JavaScript:

var w = $('#width').val();
var l = $('#length').val();
var total1 = 2;
var total2 = 3;    
if((w * l) > 5){
    total = total1 * (w + l);
    parseInt($('#total').val('total'));
}
if((w * l) < 5){
    totalnew = total2 * (w + l);
    parseInt($('#total').val(totalnew));
}

So if (#width x #length) > 5, the value of (#width x #length) would be multiplied by a certain number, in this case "2".

Tried to figure it out on jsfiddle.

Here is the code that works without the if statements: http://jsfiddle/e45SJ/

How can I implement what I am looking to achieve with the if statements with the code I already have?

EDIT: How can I add more than one if statement? I tried this: http://jsfiddle/m2LxV/2/

• javascript
• jquery
• html
• input

Share Improve this question Follow edited Jan 25, 2014 at 0:42 JJJ asked Jan 23, 2014 at 2:57 JJJJJJ 3,35255 gold badges3030 silver badges4545 bronze badges 1

• 1 What are you trying to acplish with this: parseInt($('#total').val('total')); as it makes no sense to me. – jfriend00 Commented Jan 23, 2014 at 3:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

There are multiple problems

1. You need to do the calculation in a change handler which will get called when length/height is changed
2. You are doing a string concatenation when you do w + l because both w and l are string values
3. l + w is 5 then none of your if conditions are satisfied.
4. parseInt($('#total').val('total')) just assigns the value total to the element and the parseInt does not make any sense

You need to use a change handler

jQuery(function () {
    var total1 = 2;
    var total2 = 3;

    $('#width, #length').change(function () {
        var w = +$('#width').val();
        var l = +$('#length').val();
        var total;
        if ((w * l) > 5) {
            total = total1 * (w + l);
        } else {
            total = total2 * (w + l);
        }
        $('#total').val(total);
    })
})

Demo: Fiddle

Since the question asked to use your code to make the modification thats what I did. Not much has changed here and I mented any parts that might seem difficult.

function calculate()
{
    //Parse the string value into an integer
    var w = parseInt($('#width').val());
    var l = parseInt($('#length').val());
    var total1 = 2;
    var total2 = 3;

    //Perform IF
    //suggestion to use an If {} Else
    if((w * l) > 5)
    {
        //Set an internal value of total
        var total = total1 * (w + l);
        //Update the label's value to total
        $('#total').val(total);
    }
    if((w * l) < 5)
    {
        //Same logic as above
        var total = total2 * (w + l);
        $('#total').val(total);
    }
}

//Simple button event for testing
$('button').click(function()
                  {
                    calculate();
                  });

http://jsfiddle/LLu5s/

Some things to keep in mind

• This is a great case to use an IF ELSE logic block
• $('#total').val('total') translates to > Select the input element and set its value the string string value of "total"
• parseInt() will convert the string value to integer. So even though you selected the value from width and length its of type string. so performing (w + l) will actually result in bining the two strings together, not adding numbers.

本文标签： javascriptusing if statements with input values jqueryStack Overflow