0

Let's say I have an example, where somebody can order a car by picking options.

If they order two cars, I want to be able to use the same function, but not "clobber" the variable name. Here is an example:

cars = [];

function car(color, kind) {
    this.color = color;
    this.kind = kind;
}

div.addEventListener('click', function(){
    if(cars.length) {
    newCar = new car('red', 'chrysler');
    } else {
        newCar = new car('red', 'buick');
    }
    cars.push(newCar)
}, false);

Am I correct that everytime the div is clicked, a new car is made (not that the original car is changed)?

I just don't see how I can go back and edit the first car if they have the same variable name.

It would be cool to be able to say var car+cars.length and get cars1, cars2, etc.

Startec
  • 12,496
  • 23
  • 93
  • 160
  • 1
    Why do you need to use a global `newCar` variable in the first place? How are you using it? Since you're in an event handler, I don't see how that variable would be useful. Also you're doing `cars.push(cars)`, which doesn't make a lot of sense. –  Oct 09 '14 at 23:25
  • ...now you're pushing the `car` function, which doesn't make any more sense. You probably mean `cars.push(newCar)`. Please explain why you're worried about clobbering the global. –  Oct 09 '14 at 23:29
  • You are right, sorry for the typo. I think I explained it in my comment to the answer below, but basically I am wanting to be able to go back and make changes to a specific car, which I can't do if the variable name has been reused. – Startec Oct 09 '14 at 23:31
  • 1
    But go back at what point? It seems like you just need to restructure your code somehow, but with this tiny snippet we can't see what you're ultimately trying to do. You're asking about your solution and not the original problem. I'm guessing you need something like an object that represents a customer, and that object should have an array that holds the cars for that customer so that you can edit the individual cars in the array. –  Oct 09 '14 at 23:34
  • 1
    I think what OP needs is a way to retrieve the first car, second car and etc, since you used a global variable 'newCar', it will only store the latest car instance that has been made. To achieve what you want, simply use the cars array you built, first car = cars[0], so like this. – Yang Oct 09 '14 at 23:38

1 Answers1

0

It will be overwritten because you have defined the variable in the global scope (but it shouldn't matter, since you're just pushing it to an array, anyway).

You can't do var car+cars.length (dynamic variable names are something entirely different that you don't need to get into, but if your case requires it, then take a look at this post).

However, you can just explicitly define the scope so that it is never overridden:

div.addEventListener('click', function(){
var newCar;    //redefine each time to reinitialize the variable
if(cars.length) {
    newCar = new car('red', 'chrysler');
    } else {
        newCar = new car('red', 'buick');
    }
    cars.push(newCar)
}, false);
Community
  • 1
  • 1
AstroCB
  • 12,337
  • 20
  • 57
  • 73
  • I see. This is close to what I need, however, I realize my example was overly simplistic. This is for a site where I person can order an extremely simple beverage by clicking on `divs` (that hide and reaappear` I am concerned because if the person wants to go back and change a part of their beverage, I have no way of referencing the variable name. Also, there are several event listeners so declaring `var` in one means that it will not be able to be accessed in the following listeners. – Startec Oct 09 '14 at 23:30
  • @Startec I see; that would require you to store the number of the beverage `div` (with an `id` or something of the sort) and then access the element in the array using that index. – AstroCB Oct 09 '14 at 23:32
  • I am still not explaining it well enough. A person would go through 5 "pages" to select the beverage options. At the end, they could order another beverage (which would involve going back to the beginning of the page and going through the process again). Clicking on the first div would create a new beverage but, I also want to be able to make changes to previous beverages, in the array. – Startec Oct 09 '14 at 23:34
  • @Startec Then you should still be able to keep track of each "page" and modify them based on the index. I added a link to a post about dynamic variable names if you want to take a look at that, but I doubt that your case requires it. – AstroCB Oct 09 '14 at 23:36