Javascript: Having issues calling function(Cannot read property 'value' of null)

Question

So i've been trying to debug this for a few hours and I'm completely stuck. When I go on the webpage I get this error in the console:

(Cannot read property 'value' of null at totalCost (assn1.html:18) at assn1.html:26 totalCost @ assn1.html:18 (anonymous) @ assn1.html:26.

My program is all finished I just can't get it to call the function and print the name, number of cups and the total cost at the end. Heres my code:

<html>
<head>
    <title>Tea Shoppe</title>
</head>

<body>
 <section>
    <h1> Welcome to the Tea Shoppe!</h1>
    <p>
    <img src = "http://nobacks.com/wp-content/uploads/2014/11/Tea-Cup-5-500x476.png" />
    </p>
 </section>
 <script>
    function totalCost()
    {
      var cups = parseInt(document.getElementById("cups").value);
      var tax = (cups * 9 ) /100;
      var totalAmount = parseFloat(cups + tax).toFixed(2);
      return totalAmount;
    }

    var name = prompt("Please enter your name");
    var cups = prompt("Ok " +  name + ", how many cups of tea would you like?");
    totalCost(cups);
    document.write("Ok" + name + ", you ordered" + cups + " of tea" + "your  total price is" + totalCost);


 </script>



</body>
</html>

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Teemu, Jan 13 '17 at 22:28

score 0 · Answer 1 · answered Jan 13 '17 at 22:22

0

document.getElementById("cups")

You have no element with that ID in your document.

answered Jan 13 '17 at 22:22

Quentin

800,325
104
1,079
1,205

so just take that out? – seatal Jan 13 '17 at 22:24
@seatal Replace it with the correct ID of the input element that you want to get the value from. – Barmar Jan 13 '17 at 22:27
Can i accomplish what i'm trying to do without that line? – seatal Jan 13 '17 at 22:30
You seem to have two ways of getting the number of cups, neither of which is working. The `document.getElementById("cups")` part doesn't work because there's no `cups` element. You also have a variable `cups`, which stores the number of cups from `prompt`; this variable is an argument to `totalCost`, but `totalCost` ignores its argument and then declares another variable called `cups` which takes precedence over the original one inside the function definition. If you want to use the prompt, write `function totalCost(cups)` & delete `var cups = parseInt(document.getElementById("cups").value);`. – David Knipe Jan 14 '17 at 00:10

score 0 · Answer 2 · answered Jan 13 '17 at 22:59

function totalCost(cups)
{
  var tax = (cups * 9 ) /100;
  var totalAmount = parseFloat(cups + tax).toFixed(2);
  return totalAmount;
}

var name = prompt("Please enter your name");
var cups = prompt("Ok " +  name + ", how many cups of tea would you like?");

document.write("Ok " + name + ", you ordered" + cups + " of tea" + " your  total price is " + totalCost(cups));

Here's a working version of your code, what i did here is adding teh totalcost function parameter since you pass it when you call the function and got rid of the cups variable inside your function because it has nothing to do there and was causing an error also + and changed the place where you function should be called from since it returns the totalcups value it must be put inside the document.write function to return the total in it's perfect place.

that's all and i hope this fixed your problem.

herre's a working fiddle https://jsfiddle.net/bgn4x7ej/

The math is wrong, for some reason its printing 20 dollars and eighteen cents when each cup is 1 dollar — seatal, Jan 14 '17 at 03:40
I'm assuming taxes are 9%; so here's an updated fiddle https://jsfiddle.net/bgn4x7ej/1/ this one should calculate perfectly. — Faycel Arab, Jan 14 '17 at 13:30

Javascript: Having issues calling function(Cannot read property 'value' of null)

2 Answers2