Retrieving variables from a function within a structured framework

Question

Retrieving variables from a function within a structured framework

I am attempting to create a custom "struct" and utilize it in a similar way as I would in another programming language such as Swift. Below is the definition of the "struct":

var myStruct = function (prop1) {
    this.prop1 = 30;
}

My attempt to access prop1 looks like this:

var someVar = myStruct.prop1

Unfortunately, this approach does not seem to be working. Can someone please point out what mistake I might be making and suggest a solution?

For reference, here is the link to the JSFiddle, containing the complete code:

$(document).ready(function(){
    var myStruct = function (prop1) {
this.prop1 = 30;
}
    
    $("button").click(function(){
       $("p").css({"width": myStruct.prop1, "font-size": "200%"});
    });
});

<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set multiple styles for p</button>

javascript jquery css

Answer 1

Answer №1

If you want to utilize a constructor for generating the instances, follow this syntax:

function MyCustomClass(parameter) {
    this.parameter = parameter;
}

To create an instance of that class, do the following:

var newObj = new MyCustomClass(40);

To access the property of the created instance, use the code snippet below:

console.log(newObj.parameter);

After passing in the value 40 to the object, the property this.parameter will be set to 40 and this value will be printed in the console log.

A big thank you to @Tiny_Giant for providing additional details on this topic.

Answer 2

If you want to utilize a constructor for generating the instances, follow this syntax:

function MyCustomClass(parameter) {
    this.parameter = parameter;
}

To create an instance of that class, do the following:

var newObj = new MyCustomClass(40);

To access the property of the created instance, use the code snippet below:

console.log(newObj.parameter);

After passing in the value 40 to the object, the property this.parameter will be set to 40 and this value will be printed in the console log.

A big thank you to @Tiny_Giant for providing additional details on this topic.

Answer 3

Answer №2

What you have created is known as an Object Constructor. In order to obtain an object from the constructor, you would utilize the new keyword to generate a new instance of the object. However, it is advisable not to use this method unless multiple instances of the object are required.

$(document).ready(function(){
    var myStruct = function () {
        this.prop1 = 30;
    }

    $("button").click(function(){
        $("p").css({"width": new myStruct().prop1, "font-size": "200%"});
    });
});

If creating separate instances of the object is unnecessary, you can construct a new Object using the syntax exemplified in the following example.

Take note:

This syntax permits access to the properties similar to what was attempted in your sample code.
The syntax employed in the example below already involves passing an object to the $('p').css() method.
When utilizing this syntax, properties should be delimited by commas instead of semicolons, mirroring how arrays are used.
For any object property with special characters in its name, enclose it in quotation marks and access it through the object["property"] notation.

$(document).ready(function(){
    var myStruct = {
        width: '30px',
        fontsize: '200%'
    }
    
    $("button").click(function(){
       $("p").css({
            "width": myStruct.width, 
            "font-size": myStruct.fontsize
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set multiple styles for p</button>

Answer 4

What you have created is known as an Object Constructor. In order to obtain an object from the constructor, you would utilize the new keyword to generate a new instance of the object. However, it is advisable not to use this method unless multiple instances of the object are required.

$(document).ready(function(){
    var myStruct = function () {
        this.prop1 = 30;
    }

    $("button").click(function(){
        $("p").css({"width": new myStruct().prop1, "font-size": "200%"});
    });
});

If creating separate instances of the object is unnecessary, you can construct a new Object using the syntax exemplified in the following example.

Take note:

This syntax permits access to the properties similar to what was attempted in your sample code.
The syntax employed in the example below already involves passing an object to the $('p').css() method.
When utilizing this syntax, properties should be delimited by commas instead of semicolons, mirroring how arrays are used.
For any object property with special characters in its name, enclose it in quotation marks and access it through the object["property"] notation.

$(document).ready(function(){
    var myStruct = {
        width: '30px',
        fontsize: '200%'
    }
    
    $("button").click(function(){
       $("p").css({
            "width": myStruct.width, 
            "font-size": myStruct.fontsize
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set multiple styles for p</button>

Answer 5

Answer №3

The following code snippet showcases how to declare a class:

var myClass = function (property) {
    this.property = 50;
}

Here is an example of how the class is implemented:

var objectInstance = new myClass(2);

Answer 6

The following code snippet showcases how to declare a class:

var myClass = function (property) {
    this.property = 50;
}

Here is an example of how the class is implemented:

var objectInstance = new myClass(2);

Retrieving variables from a function within a structured framework

Answer №1

Answer №2

Answer №3

Similar questions

Using JQuery and CSS to handle multiple hyperlink links with a single action

What could be causing my <UL> to not properly expand around the <LI> items inside of it?

Tips for stopping html form from refreshing upon submission

Shader in THREE.js only appears when the window is resized

Sorting tables using jQuery when receiving tables via AJAX requests

The React snackbar is mysteriously peeking out from behind the popup

Is it better to patiently await an AJAX request within a function using $.Deferred, $.When, or jQuery?

Hilarious rendering glitch with CSS in IE where the background image inexplicably contains the style "display: block."

JavaScript and CSOM updates cause SharePoint list item properties to disappear

jQuery fadeOut and fadeIn functions not functioning properly in Internet Explorer

Looking for assistance with my website's navigation bar and logo

Enhance the current model in backbone.js by incorporating additional data

Enforce a limit of two decimal places on input fields using jQuery

HTML filtering using the <select> element

Discovering the process of retrieving API data upon a button click within Next.js using server-side rendering

What is the best way to implement a media query for changing styles on hover for an element

Tips for creating a unique custom rounded underline effect in an Angular Material Tab

"Retrieving Data Using jQuery's .ajax Method in Visual Basic

The map on my leaflet only loads the initial row of tiles

Fetch solely the metadata from HTML5 video and audio files