Image Display using Javascript OOP

Question

I want to display the image in from a <button> but there seems to be some kind of problem.

I can't display the image. I've read some articles concerning about Javascript and OOP, I just don't know if I used them correctly as it is said.

Now going to my code, here what it looks like:

function myFunction() {
    function Image(src, height, width) {
        this.src = src;
        this.height = height;
        this.width = width;
    }
    image.prototype.display = function () {
        document.body.appendChild(image);
    }
    var image = new Image("image.jpg", "200", "200");
    image.display();
}
}

Hope you help me out :)

Im not an expert. But should the top function be a class instead? — Nicky Smits
– Nicky Smits, Commented Mar 8, 2014 at 0:15
That function you mentioned is a function to be called from a button. — user3394795
– user3394795, Commented Mar 8, 2014 at 0:16
Try placing the inner function outside - like a sibling of the other one, i think the problem lies there — Nicky Smits
– Nicky Smits, Commented Mar 8, 2014 at 0:18
I tried it but nothing happens. Perhaps you could show me some code concerning this, so I could get a idea on how to do it correctly? — user3394795
– user3394795, Commented Mar 8, 2014 at 0:24

DanArl · Accepted Answer · 2014-03-08 00:35:42Z

1

You need to create a DOM element and add the attributes to it. Here's a working example on jsfiddle:

http://jsfiddle.net/LADXL/

function myFunction() {

    function Image (src, height, width) {
        this.src = src;
        this.height = height;
        this.width = width;
    }

    Image.prototype.display = function() {
        var img = document.createElement('img');
            img.setAttribute("src", this.src);
            img.setAttribute("height", this.height);
            img.setAttribute("width", this.width);
        document.body.appendChild(img);
    }

    var image = new Image ( "http://www.zwani.com/graphics/hello/images/10.gif", "200" , "200" );

    image.display();
}

myFunction();

answered Mar 8, 2014 at 0:35

DanArl

1,1438 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dissident Rage Over a year ago

Where you're wrong: you can't redefine Image's constructor. Where you're right: Image.prototype.display (sort of; prototyping existing API isn't considered kosher).

user3394795 Over a year ago

This works but I need a FileReader() for the <input type=file> and a submit button for it to work. Thank you for this :)

Rhys · Accepted Answer · 2014-03-08 00:24:07Z

0

Seens as you're defining your own Image class, you don't appear to be providing anything DOM-worthy to be rendered.

Your display method might look something a bit more like (note the capitalisation of Image):

Image.prototype.display = function() {
    // probably actually want to put this in the constructor
    // i.e., one img element per Image object
    var image = document.createElement("img");
    image.src = this.src;
    image.style.height = this.height;
    image.style.width = this.width;
    // also probably don't want to append to body every time
    // display is called, style.display = "inline" or similar
    // would be better with a corresponding hide method
    document.body.appendChild(image);
}

answered Mar 8, 2014 at 0:24

Rhys

1,4911 gold badge13 silver badges24 bronze badges

3 Comments

user3394795 Over a year ago

I did something like this function myFunction(src,height,width) { this.src = "image.jpg"; this.height = 200; this.width = 200; Image.prototype.display = function() { var image = document.createElement("img"); image.src = this.src; image.style.height = this.height; image.style.width = this.width; document.body.appendChild(image); } Image.display(); } but I don't know if this was correct or not.

Derek 朕會功夫 Over a year ago

What is the point of document.createElement("img"); when you can just do new Image()?

Rhys Over a year ago

@Derek朕會功夫 none - if you're using the core Image class. The OP is using their own home-brewed Image class. For what purposes, I don't know.

Collectives™ on Stack Overflow

Image Display using Javascript OOP

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related