Appending data to a web page from a form using a JavaScript class

Question

Recently I've been reading about classes in JavaScript and decided to code this simple form to test them out. Even if the code works I am still pretty sure I lack understanding of classes and other js utilities, for example:

did I need to use constructor in this class? if not when should I use it?
is there a more efficient way to append multiple elements to the page?
is the try and catch used properly in this case?
generally speaking - is it correct example of where i should be using classes at all?

I'm not concerned with the looks of it but with functionality. Thanks for your help.

const outp = document.getElementById('err');

class data{
  constructor(email, url, number){
    this.email = email;
    this.url = url;
    this.number = number;
  }
  static append(){
    var par = document.createElement('P');
    var em = document.createTextNode(email.value);
    var ur = document.createTextNode(url.value);
    var num = document.createTextNode(number.value);
    par.appendChild(em);
    par.appendChild(ur);
    par.appendChild(num);
    document.body.appendChild(par);
  }
}

document.getElementById('submit').addEventListener('click', () => {
  outp.innerHTML = "";
  let email = document.getElementById('email').value;
  let url = document.getElementById('url').value;
  let number = document.getElementById('number').value;
  try{
    if(email == '' || url == '' || number == '' ) throw "Empty";
    data.append();
  }
  catch(err){
    outp.innerHTML = err;
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="style.css" />
    <title></title>
  </head>
  <body>
    <main>
      <label>
        <span>Email</span>
        <input type="email" id="email" required />
      </label><br>
      <label>
        <span>Url</span>
        <input type="url" id="url" required />
      </label><br>
      <label>
        <span>Number</span>
        <input type="number" id="number" required />
      </label>
      <button type="button" id="submit">Submit</button>
      <p id="err"></p>
    </main>

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

shreyasminocha · Accepted Answer · 2018-07-11 10:37:09Z

The convention with class names is that they are usually written in pascal case, for example, PascalCase. So you should use Data for your class name.

While it's great that you're experimenting with javascript classes, I feel that they're not the right tool to use for this. The main idea of a class is that they can be used to create multiple objects based off the class.

Here's a pseudo-code example of when using a class is ideal.

class Vehicle {
    constructor(model, regNumber) {
        this.model = model;
        this.regNumber = regNumber;
    }

    start() {}
    accelerate(acc) {}
    brake() {}
}

class Car extends Vehicle {
    // additional methods
}

const ford = new Car('Ford', 'HR28AP0000');
const auto = new Vehicle('ExampleDX', 'TN09XX0000');

The vehicle class has some attributes and methods. This example lends itself very well to the idea of classes.

For your code, it's best to use an append function instead.

I'd suggest looking up Object Oriented Programming. Some well written books and blogs will do a much better job of explaining when and where to use classes and objects and other OOP principles.

Edit: About try-catch, it's common to throw an Error object or one of it's descendants.

if(email == '' || url == '' || number == '' ) {
    throw new Error("Empty");
}

Stack Exchange Network

Appending data to a web page from a form using a JavaScript class

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Appending data to a web page from a form using a JavaScript class

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions