4 Replies - 403 Views - Last Post: 29 March 2016 - 01:04 PM

#1 pidgeonpancakes   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-August 11

I can't get either of my Javascript methods to work

Posted 29 March 2016 - 12:26 PM

I'm producing this for a class and I have VERY minimal Javascript experience so this is really pushing my limits. Currenty I'm trying to write two methods which are both embedded into the HTML which is below.

1. calculator() - This should take the amount of each item selected, convert them to ints, add them up and then display that at the end of the HTML document. This currently works if I put a number in each of the 5 inputs in the table but if I leave one out I get a NaN response. I think it's because of the if() condition which is supposed to exclude it if nothing has been entered. I wrote it as if (document.getElementById("makeup") != null) but I think that may be incorrect.

2. finalPrice() - I just started this one and I also always get a return on NaN. Right now I'm just working on the first entry into the table and it's supposed to take the price * cost and then return that value. Am I using the wrong parse methods?

<!--#include virtual="./header.html" -->
  <div id="menucenter">
    <table>
       <tr>
       <td>
       <a href = "index.shtml"><img src="img/home.png" onmouseover="this.src='img/homeMO.png';" 
                      onmouseout="this.src='img/home.png';" /></a>  &nbsp
       </td>
       <td>
       <a href = "prices.shtml"><img src="img/orders.png" onmouseover="this.src='img/ordersMO.png';" 
                      onmouseout="this.src='img/orders.png';" /></a>  &nbsp
       </td>
       </tr>
    <table>
   </div>
   
<script> 
  
function calculator() {
  
  var totalSelected = parseInt(0, 10);
  
  if (document.getElementById("trashcan") != null) {
      var first = parseInt(document.getElementById("trashcan").value, 10);
      totalSelected = totalSelected + first;
      }
  if (document.getElementById("diaper") != null) {
      var second = parseInt (document.getElementById("diaper").value, 10);
      totalSelected = totalSelected + second;
      }
  if (document.getElementById("taco") != null) {
      var third = parseInt (document.getElementById("taco").value, 10);
      totalSelected = totalSelected + third;
      }
  if (document.getElementById("tire") != null) {
      var fourth = parseInt (document.getElementById("tire").value, 10);
      totalSelected = totalSelected + fourth;
      }
  if (document.getElementById("makeup") != null) {
      var fifth = parseInt (document.getElementById("makeup").value, 10);
      totalSelected = totalSelected + fifth;
      } 
    
    //var totalSelected = document.getElementById("trashcan");
    document.getElementById("total").innerHTML = "Amount of Items: " + totalSelected; 
}  

function finalPrice() {

   var totalPrice = parseFloat("0.00");

   //if (document.getElementById("trashcan") != null) {
      var first = parseFloat(document.getElementById("trashcan").value);
      var cost1 = parseFloat(document.getElementById("trashcanprice").value);
      totalPrice = first * cost1;
      //}
      
    document.getElementById("amount").innerHTML = "$" + totalPrice;

}
 
</script> 
  
  
    <form>	      
        <table border = "border">
	
	        <tr>
            <th> Item </th>
	          <th> Description </th>
	          <th> Price </th>
	          <th> Quantity </th>
	        </tr>
	
	        <tr>
            <td> <img src="img/sale_oldtrashcan.jpg"> </td>
	          <td> Old dented trash can </td>
	          <td id="trashcanprice" value="1.00"> $1.00 </td>
	          <td align = "center"> 
	            <input type = "number" id = "trashcan" 
	                   size = "3" /></td>
	        </tr>
	        <tr>
            <td> <img src="img/sale_diaper.jpg"> </td>
	          <td> Dirty diaper (random color) </td>
	          <td id="diaperprice" value="2.00"> $2.00 </td>
	          <td align = "center"> 
	            <input type = "number" id = "diaper"
	                   size = "3" /> </td>
	        </tr>
	        <tr>
            <td> <img src="img/sale_taco.jpg"> </td>
	          <td> Half eaten taco </td>
	          <td id="tacoprice" value="1.00"> $1.00 </td>
	          <td align = "center"> 
	            <input type = "number" id = "taco"
	                   size = "3" /> </td>
	        </tr>
	        <tr>
            <td> <img src="img/sale_tire.jpg"> </td>
	          <td> Used and flat tire </td>
            <td id="tireprice" value="3.00"> $3.00 </td>
            <td align = "center"> 
            <input type = "number" id = "tire"
                   size = "3" /> </td>
          </tr>
          	<tr>
            <td> <img src="img/sale_makeup.jpg"> </td>
	          <td> Assorted half used makeup </td>
            <td id="makeupprice" value="3.00"> $3.00 </td>
            <td align = "center"> 
            <input type = "number" id = "makeup"
                   size = "3" /> </td>
          </tr>
      </table>  
      
    <form>
</div>

<br>
<button onclick="calculator()" type="button">Calculate Total Selection</button>
<p id="total">Amount of Items: </p> 
<button onclick="finalPrice()" type="button">Total Price</button>
<p id="amount">Total Price: </p>
<button onclick="order()" type="button">Order Items</button> 

</body>
<!--#include virtual="./footer.html" -->



Is This A Good Question/Topic? 0
  • +

Replies To: I can't get either of my Javascript methods to work

#2 pidgeonpancakes   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-August 11

Re: I can't get either of my Javascript methods to work

Posted 29 March 2016 - 12:40 PM

Here is a screenshot of the output showing both problems.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2091
  • View blog
  • Posts: 6,398
  • Joined: 15-January 14

Re: I can't get either of my Javascript methods to work

Posted 29 March 2016 - 12:49 PM

Quote

if (document.getElementById("makeup") != null)

That is comparing the actual HTML element against null. That's not what you want to do, you want to compare the value of the element against an empty or blank string.
Was This Post Helpful? 1
  • +
  • -

#4 pidgeonpancakes   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-August 11

Re: I can't get either of my Javascript methods to work

Posted 29 March 2016 - 12:56 PM

Thanks ArtificalSoldier! That's what I was missing on the calculate() method

if (document.getElementById("trashcan").value != "")



I still can't get the finalPrice method to work and will only return NaN

function finalPrice() {

   var totalPrice = parseFloat("0.00");

   if (document.getElementById("trashcan").value != "") {
      var first = parseFloat(document.getElementById("trashcan").value);
      var cost1 = parseFloat(document.getElementById("trashcanprice").value);
      totalPrice = first + cost1;
      }
      
    document.getElementById("amount").innerHTML = "$" + totalPrice;

}


This post has been edited by pidgeonpancakes: 29 March 2016 - 12:57 PM

Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2091
  • View blog
  • Posts: 6,398
  • Joined: 15-January 14

Re: I can't get either of my Javascript methods to work

Posted 29 March 2016 - 01:04 PM

It sounds like one of those two values is not parsing as a floating point number. You put a value attribute on the td elements, but td elements don't have a value attribute and in Javascript they don't have a value property. You can use the innerHTML property to get the HTML contents of the element and parse that, but you'll need to remove the dollar sign before you parse it. You could also use a newer HTML 5 data attribute and store the price there, and then use getAttribute to get the value of it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1