javascript - Multiply two values in a form - Stack Overflow

admin 管理员组

文章数量: 1086864

For my code, I am trying to call 2 parameters into a function. Once you have left the 2nd input box, and multiply the 2 numbers passed through and put it in the third text box. if either of the first 2 input boxes are empty, then color them light red. This is my code so far, what am I missing?

Javascript:

function multiply(one, two) {
if(one==""){
this.style.color='red';
}
if(two==""){
this.style.color='red';
}
else{
txt1=one * two;
return txt1;
}

}

HTML5:

First Value: <input type="text" name="mFirst" />
Second Value: <input type="text" name="mLast" onblur="multiply(mFirst.value, mLast.value)" />
Multiplication of First and Second Value: <input type="text" name="answer">

For my code, I am trying to call 2 parameters into a function. Once you have left the 2nd input box, and multiply the 2 numbers passed through and put it in the third text box. if either of the first 2 input boxes are empty, then color them light red. This is my code so far, what am I missing?

Javascript:

function multiply(one, two) {
if(one==""){
this.style.color='red';
}
if(two==""){
this.style.color='red';
}
else{
txt1=one * two;
return txt1;
}

}

HTML5:

First Value: <input type="text" name="mFirst" />
Second Value: <input type="text" name="mLast" onblur="multiply(mFirst.value, mLast.value)" />
Multiplication of First and Second Value: <input type="text" name="answer">

• javascript
• html

Share Improve this question Follow edited Dec 3, 2013 at 6:02 Phrogz 304k113113 gold badges667667 silver badges757757 bronze badges asked Dec 3, 2013 at 5:31 TimTim 33122 gold badges66 silver badges1616 bronze badges 3

• first of all you cant just return the value, you need to assign it to the answer box – jm0 Commented Dec 3, 2013 at 5:42
• I was wondering about that...where do we assign the returned value to the answer box? – Tim Commented Dec 3, 2013 at 5:44
• phrogz got it for you below -- (this.form.elements.answer.value) – jm0 Commented Dec 3, 2013 at 6:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

<input … onblur="multiply.call(this,this.form.elements.mFirst.value,this.form.elements.mLast.value)" >

function multiply(one, two) {
  if(one && two){
    this.form.elements.answer.value = one * two;
  } else {
    this.style.color='red';
  }
}

Empty strings are non-truthy values, thus one && two will only be true if neither value is an empty string.

Using call allows you to set the value of this used inside the function.

Demo: http://jsfiddle/b5Ltt/

You might want to look at the HTML5 <output> element.

You are not passing this to your multiply() function.

If you want to change this.style you can pass this as an argument.

Also, you should change mFirst.value to this.form.elements.mFirst.value and the same for mLast.value

HTML:

First Value: <input type="text" name="mFirst" />
Second Value: <input type="text" name="mLast" onblur="multiply( this , mFirst.value, mLast.value)" />
Multiplication of First and Second Value: <input type="text" name="answer">

JavaScript:

function multiply( _this, one, two) {
    var txt1 = 0;
    if(one=="" || two==""){
        // Should set both colors to red
        _this.form.elements.mFirst.style.color = 'red';
        _this.form.elements.mLast.style.color= 'red';
    }else{

        // parse float in the case of a decimal and set de
        one = parseFloat(one);
        two= parseFloat(two);

        txt1 = one * two;
        _this.form.elements.answer.value = txt1;
    }
}

First Value: <input type="text" name="mFirst" id="mFirst" />
Second Value: <input type="text" name="mLast" id="mLast" onblur="multiply()" />
Multiplication of First and Second Value: <input type="text" name="answer" id="answer" />

function multiply()
{
    var num_one = document.getElementById('mFirst').value;
    var num_two = document.getElementById('mLast').value;

    if(typeof num_one === 'number' && typeof num_two === 'number')
    {
        document.getElementById('answer').value = (parseInt(num_one) * parseInt(num_two));
    }
    else
    {
        document.getElementById('answer').style.color = 'red'; // not remended method
    }




}

Using a similar note, why this doesn't work?

function monetaryfields()
{
if (multiply) { total.value = unitary.value * quantity.value; }
else { unitary.value = total.value / quantity.value; }
}

<form>
<ul>
<li>Quantity: <input type="text" name="quantity" onblur="monetaryfields.call(true)" /></li>
<li>Unitary: <input type="text" name="unitary" onblur="monetaryfields.call(true)" /></li>
<li>Total: <input type="text" name="total" onblur="monetaryfields.call(false)" /></li>
</ul>
</form>

本文标签： javascriptMultiply two values in a formStack Overflow