Why is this script not working? Nothing is shown in live preview

Question

I'm trying to create a Car item with some values, but the function ShowCar doesn't show anything when I run the program...

    <script>    
        function Car(model,price,topspeed,acceleration,consumption) {
            this.model=model;
            this.price=price;
            this.topspeed=topspeed;
            this.acceleration=acceleration;
            this.consumption=consumption;
        } 

        function ShowCar() {
            document.write("Model:"+this.model+"<br>");
            document.write("Price:"+this.price+"<br>");    
            document.write("Topspeed:"+this.topspeed+"<br>");
            document.write("Acceleration:"+this.acceleration+"<br>");
            document.write("Average Consumption:"+this.consumption+"<hr>");
        }
    </script>
</head>
<body>
    <h1> Car List </h1>
    <script>
        Car1=new Car("Seat Ibiza","6.500 euros","190 km/h","9.7 s","5.3 l/100km");
        Car1.ShowCar();
    </script>
</body>

`ShowCar()` is NOT a member of `Car`... so it doesn't work. Opening the development console in browser, will show a nice red error about that. Move the function to the `Car` function, as `this.ShowCar = function() { // Code }` — Adrian, Nov 14 '19 at 14:09
Does this answer your question? [Javascript add method to object](https://stackoverflow.com/questions/13521833/javascript-add-method-to-object) — Ivar, Nov 14 '19 at 14:11
Instead of `function ShowCar() {...`, use `Car.prototype.ShowCar = function () {...`. — Ivar, Nov 14 '19 at 14:11

score 0 · Answer 1 · answered Nov 14 '19 at 14:13

    Car.prototype.ShowCar = function() {
        document.write("Model:"+this.model+"<br>");
        document.write("Price:"+this.price+"<br>");    
        document.write("Topspeed:"+this.topspeed+"<br>");
        document.write("Acceleration:"+this.acceleration+"<br>");
        document.write("Average Consumption:"+this.consumption+"<hr>");
    }

You can set ShowCar as part of the prototype of Car, so you'll be able to call it from an object initialized by Car. However, I suggest you learning some ES6 and use a class instead.

score 0 · Answer 2 · answered Nov 14 '19 at 14:13

You should change ShowCar to:

function ShowCar(car) {
    document.write("Model:"+car.model+"<br>");
    document.write("Price:"+car.price+"<br>");
    document.write("Topspeed:"+car.topspeed+"<br>");
    document.write("Acceleration:"+car.acceleration+"<br>");
    document.write("Average Consumption:"+car.consumption+"<hr>");
}

Then call ShowCar(Car1). ShowCar is currently a separate function rather than a method of Car.

score 0 · Answer 3 · answered Nov 14 '19 at 14:13

0

What's the 'this' reference to in your function Car? If you want to define javascript class, please refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Please use the debugger of the browser to see what happened :)

answered Nov 14 '19 at 14:13

Garry Xiao

232
3
9

score 0 · Answer 4 · answered Nov 14 '19 at 14:15

Write a proper class if you want Object Oriented Programming:

class Car {
    constructor(model, price, topspeed, acceleration, consumption) {
        this.model = model;
        this.price = price;
        this.topspeed = topspeed;
        this.acceleration = acceleration;
        this.consumption = consumption;
    }

    ShowCar() {
        document.write("Model:" + this.model + "<br>");
        document.write("Price:" + this.price + "<br>");
        document.write("Topspeed:" + this.topspeed + "<br>");
        document.write("Acceleration:" + this.acceleration + "<br>");
        document.write("Average Consumption:" + this.consumption + "<hr>");
    }
}

Then you can create an object and call a method:

Car1=new Car("Seat Ibiza","6.500 euros","190 km/h","9.7 s","5.3 l/100km");
Car1.ShowCar();

Word Rearranger · Accepted Answer · 2019-11-14T14:22:49.597

I would highly suggest reading up on OOP in javascript: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS

But for your questions, here's a working solution:

function Car(model, price, topspeed, acceleration, consumption) {
  this.model = model;
  this.price = price;
  this.topspeed = topspeed;
  this.acceleration = acceleration;
  this.consumption = consumption;

  this.ShowCar = function() {
    document.write("Model:" + this.model + "<br>");
    document.write("Price:" + this.price + "<br>");
    document.write("Topspeed:" + this.topspeed + "<br>");
    document.write("Acceleration:" + this.acceleration + "<br>");
    document.write("Average Consumption:" + this.consumption + "<hr>");
  }
}



var Car1 = new Car("Seat Ibiza", "6.500 euros", "190 km/h", "9.7 s", "5.3 l/100km");
Car1.ShowCar();

<h1>Car List </h1>

Why is this script not working? Nothing is shown in live preview

5 Answers5