JavaScript Code Optimization - Creating Reusable Classes -

i new javascript , need code optimization. pretty sure there ways create "classes" run code better , more efficient.

here link jsfiddle demo version: jsfiddle demo

<form id="tyreform"> <div id="currenttyre"> <h2>current tyre size</h2>  <div id="errordisplay"></div>  <input type="number" id="sectionwidth"> / <input type="number" id="aspectratio"> r <input type="number" id="rimdiameter">  <p>sidewall: <span class="output"></span></p> <p>width: <span class="output"></span></p> <p>diameter: <span class="output" id="fulldiameter"></span></p> <p>circumference: <span class="output"></span></p> <p>reverse / mile: <span class="output"></span></p> </div>  <div id="newtyre"> <h2>new tyre size</h2>  <input type="number" id="newsectionwidth"> / <input type="number" id="newaspectratio"> r <input type="number" id="newrimdiameter">  <p>sidewall: <span class="output"></span></p> <p>width: <span class="output"></span></p> <p>diameter: <span class="output" id="newfulldiameter"></span></p> <p>circumference: <span class="output"></span></p> <p>reverse / mile: <span class="output"></span></p> </div> <div id="result"> <h2>tyre difference</h2> <p>diameter difference(%): <span id="diameterdifference"></span></p> </div>         <button type="submit">calculate</button>     </form>  document.getelementbyid('tyreform').addeventlistener('submit', function(e) { e.preventdefault();  var sw = this.sectionwidth.value; var ar = this.sectionwidth.value; var rd = this.sectionwidth.value;  var nsw = this.newsectionwidth.value; var nar = this.newaspectratio.value; var nrd = this.newrimdiameter.value;  /* form validation starts */ var errordisplay = document.getelementbyid('errordisplay'); errordisplay.style.display = 'block';  if (sw == '' || ar == '' || rd == '') {     errordisplay.style.color = "red";     errordisplay.textcontent = "error: please fill fields";     return false; }  if (sw == 0 || ar == 0 || rd == 0) {     errordisplay.style.color = "red";     errordisplay.textcontent = "error: please check input fields. 0     not valid";     return false; } /* form validation finishes */  this.getelementsbyclassname("output")[0].textcontent = sidewall(sw, ar).tofixed(2); this.getelementsbyclassname("output")[1].textcontent = width(sw, ar, rd).tofixed(2); this.getelementsbyclassname("output")[2].textcontent = diameter(sw, ar, rd).tofixed(2); this.getelementsbyclassname("output")[3].textcontent = circumference(sw, ar, rd).tofixed(2); this.getelementsbyclassname("output")[4].textcontent = reversemile(sw, ar, rd).tofixed(2);  this.getelementsbyclassname("output")[5].textcontent = sidewall(nsw, nar).tofixed(2); this.getelementsbyclassname("output")[6].textcontent = width(nsw, nar, nrd).tofixed(2); this.getelementsbyclassname("output")[7].textcontent = diameter(nsw, nar, nrd).tofixed(2); this.getelementsbyclassname("output")[8].textcontent = circumference(nsw, nar, nrd).tofixed(2); this.getelementsbyclassname("output")[9].textcontent = reversemile(nsw, nar, nrd).tofixed(2);  var fd = document.getelementbyid('fulldiameter').textcontent; var nfd = document.getelementbyid('newfulldiameter').textcontent; document.getelementbyid('diameterdifference').textcontent =   diameterdifference(fd, nfd); }, false);  /* functions */ function sidewall(sw, ar) {  return ((sw * (ar/100)) / 25.4); }  function width(sw, ar) {  return (sw / 25.4); }  function diameter(sw, ar, rd) { return ((sidewall(sw, ar) * 2) + parsefloat(rd)); }  function circumference(sw, ar, rd) { return (((((sw * (ar/100)) / 25.4) * 2)+ parseint(rd)) * 3.14); }  function reversemile(sw, ar, rd) { return (63360 / (((((sw * (ar/100)) / 25.4) * 2)+ parseint(rd)) * 3.14)); }  function diameterdifference(fd, nfd) { return fd * nfd; // dummy formula } 

the main idea is:

• have 2 forms people can enter tire sizes.
• if first form filled data - calculation happens in first form
• if both forms filled data - both forms' calculations proceeded plus data passed third form

please check jsfiddle more information.

thanks in advance!

best

you should create tyre prototype takes sectionwidth, aspectratio, , rimdiameter in "constructor" , more of functions prototype. doing simplify logic of code , adhere principles of dry (don't repeat yourself).

var tyre = function(sectionwidth, aspectratio, rimdiameter) {     this.sw = sectionwidth;     this.ar = aspectratio;     this.rd = rimdiameter;      this.isempty = function() {         return this.sw === '' || this.ar === '' || this.rd === '';     };      this.iszero = function() {         return this.sw == 0 || this.ar == 0 || this.rd == 0;     };      this.width = function() {         return this.sw / 25.4;     };      this.sidewall = function() {         return this.width() * this.ar / 100;     };      this.diameter = function() {         return 2 * this.sidewall() + parsefloat(this.rd);     };      this.circumference = function() {         return this.diameter() * math.pi;     };      this.reversemile = function() {         return 63360 / this.circumference();     };      this.diameterdifference = function(other) {         return this.diameter() * other.diameter();     }; };  document.getelementbyid('tyreform').addeventlistener('submit', function(e) {     e.preventdefault();      var currenttyre = new tyre(this.sectionwidth.value, this.aspectratio.value, this.rimdiameter.value);      var newtyre = new tyre(this.newsectionwidth.value, this.newaspectratio.value, this.newrimdiameter.value);      /* form validation starts */     var errordisplay = document.getelementbyid('errordisplay');     errordisplay.style.display = 'block';      if (currenttyre.isempty()) {         errordisplay.style.color = "red";         errordisplay.textcontent = "error: please fill fields";         return false;     }      if (currenttyre.iszero()) {         errordisplay.style.color = "red";         errordisplay.textcontent = "error: please check input fields. 0 not valid";         return false;     }     /* form validation finishes */      this.getelementsbyclassname("output")[0].textcontent = currenttyre.sidewall().tofixed(2);     this.getelementsbyclassname("output")[1].textcontent = currenttyre.width().tofixed(2);     this.getelementsbyclassname("output")[2].textcontent = currenttyre.diameter().tofixed(2);     this.getelementsbyclassname("output")[3].textcontent = currenttyre.circumference().tofixed(2);     this.getelementsbyclassname("output")[4].textcontent = currenttyre.reversemile().tofixed(2);      if (newtyre.isempty() || newtyre.iszero())         return;      this.getelementsbyclassname("output")[5].textcontent = newtyre.sidewall().tofixed(2);     this.getelementsbyclassname("output")[6].textcontent = newtyre.width().tofixed(2);     this.getelementsbyclassname("output")[7].textcontent = newtyre.diameter().tofixed(2);     this.getelementsbyclassname("output")[8].textcontent = newtyre.circumference().tofixed(2);     this.getelementsbyclassname("output")[9].textcontent = newtyre.reversemile().tofixed(2);      document.getelementbyid('diameterdifference').textcontent = currenttyre.diameterdifference(newtyre); }, false);