Utilizing Object-Oriented Programming in JavaScript for Image presentation

Question

Utilizing Object-Oriented Programming in JavaScript for Image presentation

I am struggling to show an image using a <button> element and it seems like there is an issue that I can't figure out.

Despite reading various resources on Javascript and OOP, I am still unsure if I have implemented the concepts correctly in my code.

Let me share with you how my code looks:

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();
}
}

I really hope someone can assist me with this problem. Thank you! :)

javascript oop

Answer 1

Answer №1

To accomplish this task, you must first create a DOM element and then assign attributes to it. An effective demonstration of this process can be found on jsfiddle:

http://jsfiddle.net/XYZ123/

function customFunction() {

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

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

    var picture = new Image ( "http://www.example.com/image.jpg", "300" , "300" );

    picture.displayImage();
}

customFunction();

Answer 2

To accomplish this task, you must first create a DOM element and then assign attributes to it. An effective demonstration of this process can be found on jsfiddle:

http://jsfiddle.net/XYZ123/

function customFunction() {

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

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

    var picture = new Image ( "http://www.example.com/image.jpg", "300" , "300" );

    picture.displayImage();
}

customFunction();

Answer 3

Answer №2

Since you are creating your own Picture class, it seems like you haven't included any elements that can be displayed on the web page.

A revised version of your show function could resemble the following (pay attention to the capitalization of Picture):

Picture.prototype.show = function() {
    // It may be more appropriate to include this in the constructor
    // for example, having one image element per Picture object
    var pictureElement = document.createElement("img");
    pictureElement.src = this.source;
    pictureElement.style.height = this.height;
    pictureElement.style.width = this.width;
    // Additionally, appending the image to the body every time show is called
    // may not be ideal; using style.display = "inline" or similar
    // along with a hide method might be a better approach
    document.body.appendChild(pictureElement);
}

Answer 4

Since you are creating your own Picture class, it seems like you haven't included any elements that can be displayed on the web page.

A revised version of your show function could resemble the following (pay attention to the capitalization of Picture):

Picture.prototype.show = function() {
    // It may be more appropriate to include this in the constructor
    // for example, having one image element per Picture object
    var pictureElement = document.createElement("img");
    pictureElement.src = this.source;
    pictureElement.style.height = this.height;
    pictureElement.style.width = this.width;
    // Additionally, appending the image to the body every time show is called
    // may not be ideal; using style.display = "inline" or similar
    // along with a hide method might be a better approach
    document.body.appendChild(pictureElement);
}

Utilizing Object-Oriented Programming in JavaScript for Image presentation

Answer №1

Answer №2

Similar questions

nested dropdowns in Bootstrap 4

Connect the incoming http request information to a different controller

Surprising Regex Match of ^ and special character

The use of callbacks in Model.findById() is now deprecated due to a MongooseError

Using Javascript regular expressions to substitute $1 with the result of f($1)

Retrieving an element based on user input's value

How to retrieve the ID of a parent sibling using jQuery DataTables

Developing a Prototype for an Angular Directive

Using Dropzone.js to bypass the Browse dialog when uploading files in integration tests with php-webdriver

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

The success callback in the first call will only be triggered when a breakpoint is established

When render returns another component, React does not invoke componentWillMount

Resizing the Canvas in Three.js with GLSL

Determine all the names of imported files in a source file using regular expressions in JavaScript

Show a pop-up window when a button is clicked, just before the page redirects

switching the icon for custom sorting in AngularJS

Is there a way to trigger Material-UI SpeedDialAction onClick events only when the SpeedDial is open and clicked, not when it is hovered over?

Synchronous execution in Node.js: Best practices for coordinating tasks

Using AngularJS to retrieve DOM elements within a directive's controller

I am looking to download a file from a server and showcase it in a browser using React.js. The file will be received as a response from the