Hi, just playing around wiith javascript classes. Can anyone say how to call a function from an instance

Question

0.00/5 (No votes)

See more:

Hi, I created a Javascript class to create buttons. I want to call a function from the button created by the button class. Any ideas on how this is done? View the code pasted and run it in your browser and see what I am talking about. Thanks for all responses. There must be a way to call a function from a button object in js.

What I have tried:

<pre> class Button{
constructor(name, bgcolor, color, padding, margin, height, width, border){
this.name = name;
this.bgcolor = bgcolor;
this.color = color;
this.padding = padding;
this.margin = margin;
this.height = height;
this.width = width;
this.border = border;
this.create = ()=>{
var btn = document.createElement('button');
var text = document.createTextNode(this.name);
btn.appendChild(text);
btn.style.backgroundColor = this.bgcolor;
btn.style.color = this.color;
btn.style.padding = this.padding;
btn.style.margin = this.margin;
btn.style.height = this.height;
btn.style.width = this.width;
btn.style.border = this.border;
var doc = document.getElementById('output');
doc.appendChild(btn);
}
}
}

var btnOne = new Button('Send', 'Red', '#fff', '5px 10px', '10px', 'auto', '100px');
btnOne.create();

var btnTwo = new Button('Say hi', 'teal', '#fff', '5px 10px', '10px', 'auto', '100px');
btnTwo.create();
btnTwo = function (){
alert('Hello World');
}</pre>

Posted 11-Jul-22 6:27am

Andy R 2022

Updated 11-Jul-22 9:03am

v3

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2022-07-11T06:33:00

Solution 1

Use the appropriate event of the class: onclick Event[^]

Posted 11-Jul-22 6:33am

Richard MacCutchan

raddevus · Answer 2 · 2022-07-11T08:36:00

JavaScript

// main.js with a function named myFunc()
//main.js
function myFunc(){
   alert("test this");
}

In your HTML file include script tag referencing that file

HTML

<script src="main.js"></script>

<button onclick="myFunc()">Click Me</button>

Or just do the following for a quick test:

HTML

<button onclick="alert(`test me`)">Test Me</button>

Andy R 2022 · Answer 3 · 2022-07-11T08:52:00

Solution 3

Hi, thanks for your reply. But what I am looking for is not an HTML solution but a javascript object oriented solution. The code I posted was a class call button. I did this class as a way to build a button class using javascript and then call a function from the button that was created by the Button class.

Posted 11-Jul-22 8:52am

Andy R 2022

Comments

Richard MacCutchan 12-Jul-22 3:54am

Yes, and the suggestions we have offered are the solutions to the question. If you have a different question then please open a new QA entry, and provide clearer details of the problem.

Andy R 2022 12-Jul-22 4:36am

Hi, thanks for your reply. I tried that solution and it did not work for a button created from a class. That will work for HTML but this is object oriented js. The whole idea was to create a button class in js and have those buttons call different functions. I used eventListeners as well but any button click call the function and not the button that I set as the variable for the event.