html - Calculate Total Onclick Javascript - Stack Overflow

admin管理员组

文章数量:1326332

I am learning Javascript and am still very new to the language. In my HTML code I have two lists. In the first select list you select the product you want In the second you select the amount of product you require.

I have attempted to write a javascript code which does the following:

• Get the product value and assign it to a variable
• Get the nr of product and assign it to a variable
• Multiply the product value with the number of product
• When the user clicks submit display an alert box with the total

However my code is not working when the user click the submit button I get the message NaN instead of the result of the total amount variable Please can you have a look at my code and tell me what am I doing wrong

<script type="text/javascript">
function calc()
{
   var total;
   var fruitOrVeg;
   var nrOfFruit;

   course = document.getElementsByName("fruitOrVeg.course.value")
   nrOfFruit = document.getElementsByName("nrOfFruit")

   total = fruitOrVeg * nrOfFruit;

   window.alert(total)
}
</script>

I am learning Javascript and am still very new to the language. In my HTML code I have two lists. In the first select list you select the product you want In the second you select the amount of product you require.

I have attempted to write a javascript code which does the following:

• Get the product value and assign it to a variable
• Get the nr of product and assign it to a variable
• Multiply the product value with the number of product
• When the user clicks submit display an alert box with the total

However my code is not working when the user click the submit button I get the message NaN instead of the result of the total amount variable Please can you have a look at my code and tell me what am I doing wrong

<script type="text/javascript">
function calc()
{
   var total;
   var fruitOrVeg;
   var nrOfFruit;

   course = document.getElementsByName("fruitOrVeg.course.value")
   nrOfFruit = document.getElementsByName("nrOfFruit")

   total = fruitOrVeg * nrOfFruit;

   window.alert(total)
}
</script>

• javascript
• html

Share Improve this question Follow edited Apr 18, 2013 at 13:49 Liam 29.8k2828 gold badges138138 silver badges202202 bronze badges asked Apr 18, 2013 at 13:41 Tim CTim C 5,71499 gold badges4242 silver badges9898 bronze badges 3

• use the eval function. The eval() function evaluates or executes an argument. – happybuddha Commented Apr 18, 2013 at 13:51
• 1 Don't use eval. Eval is bad. – Colin DeClue Commented Apr 18, 2013 at 13:51
• Can you show us your Html as well? – Colin DeClue Commented Apr 18, 2013 at 13:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The immediate problem was that you weren't using the fruitOrVeg variable. Other than that, the retrieval of the elements' values doesn't make sense in your code. Try this:

function calc() {
   var total,
       fruitOrVeg,
       nrOfFruit;

   fruitOrVeg = document.getElementsByName("fruitOrVeg")[0].value;
   nrOfFruit = document.getElementsByName("nrOfFruit")[0].value;

   total = fruitOrVeg * nrOfFruit;

   alert(total);
}

assuming your HTML is like:

<select name="fruitOrVeg">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br />
<input type="text" name="nrOfFruit" />
<br />
<input type="button" id="submit_button" value="Submit" />

DEMO: http://jsfiddle/TNPCh/

So your first problem is that you weren't actually getting the elements' values. You do that by using .value to get them.

Second problem is that the result of getElementsByName is an HTMLCollection (an array), so you can't just use .value on it. If you're sure there's only one element with this name, just index the array with [0] to get the first one found. An easier thing to do is give the elements the id attribute and use document.getElementById - which returns one and only one element (not an array). I didn't want to assume you were able to do that, so my code still uses getElementsByName.

Finally, the multiplication doesn't need any conversion/parsing to a number. The * operator automatically coerces the values into numbers so the multiplication can occur. So since they are originally strings, the operation will plete because of this coercion (this is not the case with the + operator). Of course, if either operand isn't a number in the first place, the multiplication's result will be NaN.

You are taking the values as strings (rather than numbers), and you weren't using "fruitOrVeg". Also (noticed later/ new ments) you are using names when you should really use ID's for elements you want javascript to get data from directly and specifically, and then update your js accordingly. Try this:

function calc() {
    var fruitOrVeg = Number(document.getElementsById("fruitOrVeg").value);
    var nrOfFruit = Number(document.getElementsById("nrOfFruit").value);

    var total = fruitOrVeg * nrOfFruit;

    window.alert(total)
}

try to use parseInt for all the values.You did not have a value for fruitOrVeg .Try to declare with a value whatever you want

function calc()
{
var total = 0;
var nrOfFruit = 0;

course = Number(document.getElementsByName("fruitOrVeg"));
nrOfFruit = Number(document.getElementsByName("nrOfFruit"));

total = fruitOrVeg * nrOfFruit;

window.alert(total)

}

本文标签： htmlCalculate Total Onclick JavascriptStack Overflow