Is creating objects in html and having functions considered bad practice in oop?

Question

I'm just learning about JS and oop and was wondering whether creating objects in HTML and calling fuctions there is considered a bad practice. For example in the onclick event like in the example bellow. Also is it allowed to have functions which are not methods? Like having one function where I'd be creating all the objects and calling their methods.

<input id="first_name" type="text" placeholder="First Name">
<input id="second_name" type="text" placeholder="Second Name">
<button onclick="const name = new Person('first_name', 'second_name', 'output'); name.writeName()">Show name</button>
<p id="output"></p>

class Person {
       constructor(first_name_id, second_name_id, output_id) {
           this.first_name = document.getElementById(first_name_id)
           this.second_name = document.getElementById(second_name_id)
           this.output = document.getElementById(output_id)
       }
       writeName() {
           return this.output.innerHTML = "Your name is" + this.first_name.value + " " + this.second_name.value
       }
   }

On-events are discouraged (ex. <a onclick=...) but using JavaScript in most other forms isn't (eval and with being rare exceptions). — zer00ne
– zer00ne, Commented May 18, 2019 at 16:44

T.J. Crowder · Accepted Answer · 2019-05-18 16:41:55Z

The problem with using old-style onxyz-attribute event handlers is that you can only use global functions in them. The global namespace on browsers is very crowded, and so it's best to avoid adding more to it when you can avoid it.

In your example, you might consider ensuring that the button can be identified with a CSS selector (or an id) and then hooking up your handler using modern techniques like addEventListener:

const theButton = document.querySelector("selector-for-the-button"); // or = document.getElementById("the-button-id");
theButton.addEventListener("click", function() {
    const name = new Person('first_name', 'second_name', 'output');
    name.writeName();
});

That way, Person doesn't have to be global.

This is particularly useful when combined with modules (whether JavaScript's native modules or those provided by Webpack, Rollup, and similar).

Here's a complete example, notice that it doesn't use any globals:

{ // Scoping block to avoid creating globals
    class Person {
        constructor(first_name_id, second_name_id, output_id) {
            this.first_name = document.getElementById(first_name_id);
            this.second_name = document.getElementById(second_name_id);
            this.output = document.getElementById(output_id);
       }
       writeName() {
           return this.output.innerHTML = "Your name is " + this.first_name.value + " " + this.second_name.value;
       }
    }
    
    document.getElementById("show-name").addEventListener("click", function() {
        const name = new Person('first_name', 'second_name', 'output');
        name.writeName();
    });
}

<input id="first_name" type="text" placeholder="First Name">
<input id="second_name" type="text" placeholder="Second Name">
<button id="show-name">Show name</button>
<p id="output"></p>

Magnus Peterson-Munoz · Accepted Answer · 2019-05-18 17:05:03Z

0

In my opinion, yes, that is a very bad practice. To make something clickable(like a button), use this code in a separate JS file.

// Anoymonous function
varName.addEventListener("click", function(){
alert("hi")
})

answered May 18, 2019 at 17:05

Magnus Peterson-Munoz

171 bronze badge

Collectives™ on Stack Overflow

Is creating objects in html and having functions considered bad practice in oop?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related