Trouble with index and calculating total Price

JavaScript
1

I am having difficulties with the .js code. Basically, I want to be able to select an item from a list of arrays, get and display the unit price from a list in .js and be able to calculate the total price and pass that off to the payment processor. I’ve done my best. I need someone kind enough to look at my code and complete it so that I can learn from his/her example.

Untitled
Untitled1236×183 3.08 KB 

function createBill() {
  let unitPrice = {
    blueBRT: 80000,
    redBRT: 50000,
    coaster: 35000,
    tata: 30000,
  };
  let totalPrice = {}

  totalPrice.blueBRT = ($("#qty_blueBRT").val() * unitPrice.blueBRT)
  $("#price_blueBRT").val(totalPrice.blueBRT);
  totalPrice.redBRT = ($("#qty_redBRT").val() * unitPrice.redBRT)
  $("#price_redBRT").val(totalPrice.redBRT);
  totalPrice.coaster = ($("#qty_coaster").val() * unitPrice.coaster)
  $("#price_coaster").val(totalPrice.coaster);
  totalPrice.tata = ($("#qty_tata").val() * unitPrice.tata)
  $("#price_tata").val(totalPrice.tata);
}

var e1 = document.getElementById("item1");
var itemselected1 = e1.options[e1.selectedIndex].value;
if (itemselected1 != "1") {
  items[index] = itemselected1;
  quantity[index] = document.getElementById("qty").value;
  unitPrice[index] = document.getElementById("unitPrice").value;
  index++;
}

var fTot = 0;
strt(1);
for (var i = 0; i < index; i++) {
  document.write("<tr>");
  createtbl(items[i]);
  createtbl(quantity[i]);
  createtbl(unitPrice[i]);
  var totalPrice = parseInt(quantity[i]) * parseInt(unitPrice[i]);
  document.write("<td>" + totalPrice + "</td>");
  fTot += totalPrice;
  document.write("</tr>");
}
document.write("<tr><td colspan=\"3\"><strong>TOTAL</strong></td><td>" + fTot + "</td><tr>");
strt(2);

function createtbl(x) {
  document.write("<td>" + x + "</td>");
}

function strt(n) {
  if (n == 1) {
    document.writeln("<h1 style=\"text-align:center;\">The Bill</h1>");
    document.writeln("<table width=\"90%\" border=\"1\">");
    document.writeln("<tr><th>ITEMS</th><th>QUANTITY</th><th>PRICE</th><th></th></tr>");
  } else
    document.write("</table>");
}

function createTot(x, y) {
  var tot = parseInt(x) * parseInt(y);
  document.write("<td>" + tot + "</td>");
}

<form name="plform">
  <table width="50%" id="alignment">
    <tr>
      <th> Choose Transport </th>
      <th> Quantity </th>
      <th> Cost per Unit </th>
      <th> Total Cost </th>
    </tr>
    <tr>
      <td>
        <select id="item1">
          <option value="1">--Select Bus--</option>
          <option value="BLUE BRT BUS">BLUE BRT BUS WITH A/C (70 SEATERS)</option>
          <option value="RED BRT BUS">RED BRT BUS WITH NO A/C (70 SEATERS)</option>
          <option value="COASTER BUS">COASTER BUS 30 SEATERS</option>
          <option value="TATA BUS">TATA BUS (28 SEATERS)</option>
        </select>
      </td>
      <td><input type="number" value="0" id="qty"></td>
      <td><input type="number" readonly value="0" id="unitPrice"></td>
      <td><input type="number" readonly value="0" id="totalPrice"></td>
      <td><input type="submit" class="button" value="Pay Now" onclick=createBill()></td>
    </tr>

    <tr>
      <td></td>
      <td></td>

    </tr>
  </table>
</form>
2

Well, probably no one is going to do this because we generally don’t write other people’s code here. But we can help you try to figure out what the problem is and then you can write the code to fix it.

Is this all of your JS? Or did you leave some out? If so, you’ll want to give us everything so we have a better idea of what you are trying to do.

You’ve got four functions defined and then you’ve got some code that isn’t in a function and thus is run once when the page first loads and then never again. Is this what you want? Also, in the code that is run just once, you keep referencing the variable index but I don’t see where that variable is defined, so your JS is gonna break as soon as it hits the for loop that uses index.

I will give you one hint now. Add type="button" to the Pay Now button. This will keep it from refreshing the page every time you click it. Actually, you should probably just use a button element.

3

WOW! The change from type=“submit” to type=“button” solved one of my challenges instantly. Thank you. I have now declared the variable index. It was there before.

function createBill(){
var index = 0;
let unitPrice={
blueBRT: 80000,
redBRT: 50000,
coaster: 35000,
tata: 30000,
};
let totalPrice={}

This is all my JS, I just don’t know where to go from here. I want to be able to log the Cost per Unit when a particular transport is selected, and then calculate and show the total price. Please help with those as well. Thank you sir.

4

You can’t declare index inside of the createBill function and then reference it outside of the function. So that is not going to work.

Also, please put your code in something like codepen (and then give us the link to it) so that we can test it easier and see your updates. Right now we have to copy/paste it in there ourselves and that’s not very fun and I’m probably not going to want to keep doing that.

Let’s look at the for loop:

for (var i = 0; i < index; i++) {
  ...
}

What is the value of index supposed to represent?

5

I’m learning every day and I hope to continue to grow my knowledge and skillset as I interact with people like you with more experience. Here is my codepen, sir.

I don’t think I know what I am doing anymore. Since yesterday, my mind has become
blurry trying to figure out how to solve this. I’m a high school teacher trying to learn programming and transition to a career in Tech. I hope to get better someday.

Please help as much as you can, you wouldn’t know this but the few things I’ve learnt from you today are unimaginable. I appreciate it.

6

You’ve set up the codepen up but you need to add jquery to it. In the JS pane, click on the gear icon in the upper right and search for jquery under “Add External Scripts/Pens” and then click on jquery to add it.

It looks like you are in the process of making a lot of changes to your code. I think you should get back to us when you are done and ready for someone to take another look. It’s too confusing to try and help you when there are constant changes.

Good luck.

7

I’m sorry sir, I’m ready. I’m not making any more changes, I only removed the table I didn’t need.
I’ve added jQuery to the pen. Please take a look again.

8

Last help of the night because I’m going to bed.

I think you forgot to include the strt and createtbl functions in your JS.

I see you are adding event handlers to the inputs, but this code is never being executed because you have an error in the for loop before that code due to the use of the index variable which is not defined. Also, that for loop is referencing the items, quantity, and unitPrice arrays which do not exist, so that’s another issue you need to figure out. To be honest, I’m not sure why that for loop is where it is? What is the purpose of this loop? When should it run?

Good luck.

9

The truth is that after I got stuck yesterday, I’ve been trying to research online for a solution. With each iteration I make hoping to solve my problem, I keep messing up my code until I can’t even interpret it anymore. I wish I had come to FCC yesterday.

I’m so sorry for your trouble and I hope you have a good night’s rest. When you wake up, please don’t forget that I’m lost here trying to figure this out and I really need your help. I’m going to try to rewrite the code the best I can and hopefully you can point me to the right path when you wake up.

Good night sir.

10

hi rudedough1 ,

I’m glad that you found your way to the FCC community, welcome.

With regards to your mini application that you are trying to build, I think there is too much wrong for anyone to try and fix without completely re-writing the app’. However, I will give you my two penny’s worth.

Let’s start with the interface:

You have four input fields:

  • choose transport
  • quantity
  • cost / unit
  • total cost

input fields are normally used for user input. Only the first two of these inputs actually needs used interaction:

  • choose transport
  • quantity

the other two:

  • cost / unit

is a stored value and just needs to be displayed when the user has selected the transport type and thus, shouldn’t be an HTML input tag.

and:

  • total cost

which should be calculated based on the user’s input of type & quantity of transport and thus, shouldn’t be an HTML input tag!

Your ‘pay now’ button should be defined as a button as said by @bbsmooth

When the user clicks the ‘pay now’ button it runs function createBill() inside of which we have:

  • an object literal that is holding transport type and cost
  • declared variables
  • document queries being run in vanilla JS
  • document queries being run with a front end library jQuery

…and the function doesn’t return anything. I say that because when I see a function called ‘createBill’ I would expect it to take some parameters that gave the function everything it needed to create and return ‘The Bill’

Outside of the function, we have a query selector that loops over all input elements and adds an event listener to each. Within this loop we call a function totalPrice() which has not been defined anywhere in your code.

we then have this line:
var totalPrice = parseInt(qty) * parseInt(unitPrice);
where qty and unitPrice are not defined anywhere as variables and thus totalPrice can never be calculated, therefore:

document.write("<td>" + totalPrice + "</td>"); fTot += totalPrice; document.write("</tr>");

would never work.

We then have function createTot(x, y) which is never called and hence does nothing.

There are problems with both the structure and programming above, but do not disrepair!

When I read who you are and what you are trying to achieve I feel for you. I can see that you have been scouring the Internet trying to learn how to write computer programs, this is a hard thing to accomplish because writing computer programs is hard, learning a computer language is possibly harder especially JavaScript!

My advice is that whatever you do, you need to build absolutely solid foundations in the language of your choice AKA JavaScript in this instance and then learn how to build programs. The FreeCodeCamp will take you on that journey and there’s a community here to support you all the way.

It’s all up to you now, I’d say, if you are really up for it, start the FCC curriculum and work your way through it, folks here will support you and enjoy your company :slight_smile:

Good luck now and “happy Coding!”

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.