Appending data to a web page from a form using a JavaScript class
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
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
tryandcatchused 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 url == ''
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>javascript beginner object-oriented form dom
edited Jul 11 at 14:19
200_success
123k14143399
asked Jul 11 at 9:31
aMJay
1307
add a comment |Â
up vote
2
down vote
favorite
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
tryandcatchused 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 url == ''
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>javascript beginner object-oriented form dom
edited Jul 11 at 14:19
200_success
123k14143399
asked Jul 11 at 9:31
aMJay
1307
add a comment |Â
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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
tryandcatchused 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 url == ''
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>javascript beginner object-oriented form dom
edited Jul 11 at 14:19
200_success
123k14143399
asked Jul 11 at 9:31
aMJay
1307
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
tryandcatchused 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 url == ''
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>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 url == ''
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>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 url == ''
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>javascript beginner object-oriented form dom
edited Jul 11 at 14:19
200_success
123k14143399
asked Jul 11 at 9:31
aMJay
1307
edited Jul 11 at 14:19
200_success
123k14143399
edited Jul 11 at 14:19
200_success
123k14143399
edited Jul 11 at 14:19
200_success
123k14143399
123k14143399
asked Jul 11 at 9:31
aMJay
1307
asked Jul 11 at 9:31
aMJay
1307
asked Jul 11 at 9:31
aMJay
1307
1307
add a comment |Â
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
3
down vote
accepted
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");
answered Jul 11 at 10:24
shreyasminocha
20718
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
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");
answered Jul 11 at 10:24
shreyasminocha
20718
add a comment |Â
up vote
3
down vote
accepted
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");
answered Jul 11 at 10:24
shreyasminocha
20718
add a comment |Â
up vote
3
down vote
accepted
up vote
3
down vote
accepted
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");
answered Jul 11 at 10:24
shreyasminocha
20718
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");
answered Jul 11 at 10:24
shreyasminocha
20718
edited Jul 11 at 10:37
answered Jul 11 at 10:24
shreyasminocha
20718
answered Jul 11 at 10:24
shreyasminocha
20718
answered Jul 11 at 10:24
shreyasminocha
20718
20718
add a comment |Â
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f198271%2fappending-data-to-a-web-page-from-a-form-using-a-javascript-class%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password