Calculate Total Onclick Javascript

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

Solution 1:

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.net/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 complete 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.

Solution 2:

You are taking the values as strings (rather than numbers), and you weren't using "fruitOrVeg". Also (noticed later/ new comments) 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)
}

Solution 3:

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)

}