javascript - Fix code for better layout -

var tickettype; var ticketprice; var ticketqty; var discountamount; var nettamount; tickettype = prompt("what sort of tickets like"); document.write("ticket type: " + tickettype);  if (tickettype.tolowercase() == "a") {   ticketprice = 100; } else if (tickettype.tolowercase() == "b") {   ticketprice = 75; } else if (tickettype.tolowercase() == "c") {   ticketprice = 50; } else {   document.write("invalid ticket type"); }  ticketqty = prompt("how many tickets like"); var ticketqty = parseint(ticketqty); document.write("<br/>"); document.write("ticket qty is: " + ticketqty); document.write("<br/>"); if (ticketqty < 0 || ticketqty > 100) {   document.write("invalid qty");  } ticketprice = (ticketprice*ticketqty); if (ticketprice > 0 && ticketqty > 0 && ticketqty < 100) {   document.write("gross amount:$" + ticketprice); }  document.write("<br/>"); if (ticketprice < 200) {     document.write("discount percent: 0%");     discountpercent = 0; }   else if (ticketprice < 400) {     document.write("discount percent: 5%");     discountpercent = 0.05; }   else if (ticketprice < 600) {     document.write("discount percent: 7.5%");     discountpercent = 0.075; }   else if (ticketprice > 599.99) {     document.write("discount percent: 10%");     discountpercent = 0.10; }     document.write("<br/>"); discountamount = (ticketprice*discountpercent);     document.write("discount amount:$" + discountamount);     document.write("<br/>"); nettamount = (ticketprice-discountamount);     document.write("nett amount:$" + nettamount); 

can reorganize code in better step making more clear , work properly, have tried changing code bit keep getting told wrong please fix it. thank you

this perfect opportunity explore objects! yaaay!

the first 2 lines in code below find empty ticket dom element, , create ticket object. when object created, complete dom structure being inserted. happens because first function, createticketdomels() being called when new ticket instantiated. @ point, no other function within ticket has been called.

so create event listener on button, , when clicked, calls new ticket's gettickettype(), displays prompt, saves ticket values, , populates appropriate dom nodes.

var ticketel = document.queryselector("div.ticket-pane");  var myticket = new ticket(ticketel);    document.queryselector(".order-ticket").addeventlistener("click", function(evt) {    evt.preventdefault();    evt.stoppropagation();    myticket.gettickettype();  });      function ticket(ticketel) {    var = this;    this.ticketel = ticketel;    createticketdomels();      /****     * functions below act on instance of ticket.     *   public, private.     ****/      /****     * function createticketdomels() private, because it's     *   used internally create ticket structure.     *   don't need dom whole worry how     *   structure ticket element, pass blank     *   element me , function fill     *   display fields.     ****/    function createticketdomels() {      that.tickettypeel = document.createelement("div");      that.ticketpriceel = document.createelement("div");      that.ticketqtyel = document.createelement("div");      that.ticketdiscountel = document.createelement("div");      that.tickettotalel = document.createelement("div");      that.ticketel.appendchild(that.tickettypeel);      that.ticketel.appendchild(that.ticketpriceel);      that.ticketel.appendchild(that.ticketqtyel);      that.ticketel.appendchild(that.ticketdiscountel);      that.ticketel.appendchild(that.tickettotalel);      that.tickettypeel.classname = "ticket-type";      that.ticketpriceel.classname = "ticket-price";      that.ticketqtyel.classname = "ticket-quantity";      that.ticketdiscountel = "ticket-discount";      that.tickettotalel = "ticket-total"    }      /****     *  this.gettickettype() public function takes     *    ticket type , returns ticket type.     *    additionally, populate ticket type ,     *    price dom nodes.     *  note: using this.functionname versus var function()     *    determines public versus private functions.     ****/    this.gettickettype = function() {      this.tickettype = prompt("what type of ticket (a, b or c)?");      switch (that.tickettype.tolowercase()) {        case "a":          this.ticketprice = 100;          break;        case "b":          this.ticketprice = 75;          break;        case "c":          this.ticketprice = 50;          break;        default:          this.ticketprice = null;          // error handling if needed.          }      if (this.ticketprice) {        // if have valid ticket price, can go ahead.        this.ticketpriceel.innertext = "price: $" + this.ticketprice.tofixed(2);        this.tickettypeel.innertext = "ticket type: " + this.tickettype;      } else {        // no valid ticket price, it's invalid type.        this.tickettypeel.innertext = "an invalid ticket type. please choose either a, b or c."      }    };  };

<div class="ticket-pane">    </div>  <input type="button" class="order-ticket" value="place order!" />

by working in way, can add functionality ticket class, , test each piece independently of others. example, suppose want next step, ticket quantity. it's matter of creating function in ticket:

var ticketel = document.queryselector("div.ticket-pane");  var myticket = new ticket(ticketel);    document.queryselector(".order-ticket").addeventlistener("click", function(evt) {    evt.preventdefault();    evt.stoppropagation();    myticket.gettype();  });      function ticket(ticketel) {    var = this;    this.ticketel = ticketel;    createticketdomels();      /****     * functions below act on instance of ticket.     *   public, private.     ****/      /****     * function createticketdomels() private, because it's     *   used internally create ticket structure.     *   don't need dom whole worry how     *   structure ticket element, pass blank     *   element me , function fill     *   display fields.     ****/    function createticketdomels() {      // note that, because i've created private function,      //  reference 'this' thrown. i've created reference      //  above that=this, can maintain reference      //  regardless.      that.tickettypeel = document.createelement("div");      that.ticketpriceel = document.createelement("div");      that.ticketqtyel = document.createelement("div");      that.ticketdiscountel = document.createelement("div");      that.tickettotalel = document.createelement("div");      that.ticketel.appendchild(that.tickettypeel);      that.ticketel.appendchild(that.ticketpriceel);      that.ticketel.appendchild(that.ticketqtyel);      that.ticketel.appendchild(that.ticketdiscountel);      that.ticketel.appendchild(that.tickettotalel);      that.tickettypeel.classname = "ticket-type";      that.ticketpriceel.classname = "ticket-price";      that.ticketqtyel.classname = "ticket-quantity";      that.ticketdiscountel = "ticket-discount";      that.tickettotalel = "ticket-total";          }      /****     *  this.gettickettype() public function takes     *    ticket type , returns ticket type.     *    additionally, populate ticket type ,     *    price dom nodes.     *  note: using this.functionname versus var function()     *    determines public versus private functions.     ****/    this.gettype = function() {      this.tickettype = prompt("what type of ticket (a, b or c)?");      switch (that.tickettype.tolowercase()) {        case "a":          this.ticketprice = 100;          break;        case "b":          this.ticketprice = 75;          break;        case "c":          this.ticketprice = 50;          break;        default:          this.ticketprice = null;          // error handling if needed.          }      if (this.ticketprice) {        // if have valid ticket price, can go ahead.        this.ticketpriceel.innertext = "price: $" + this.ticketprice.tofixed(2);        this.tickettypeel.innertext = "ticket type: " + this.tickettype;              // we're adding functionality set      //  quantity, need way call function.      //  these dom elements let call manually.      this.ticketqtybtn = document.createelement("input");      this.ticketqtyel.appendchild(this.ticketqtybtn);      this.ticketqtybtn.type = "button";      this.ticketqtybtn.value = "set quantity";      this.ticketqtybtn.addeventlistener("click", function(){        that.getquantity();      });      } else {        // no valid ticket price, it's invalid type.        this.tickettypeel.innertext = "an invalid ticket type. please choose either a, b or c."      }    };        /*****     * public function input quantity, , force     *  valid. valid, in case, means between 0 , 100.     *****/    this.getquantity = function(){      this.ticketquantity = parseint(prompt("how many tickets yo u (0-100)?") );      if (this.ticketquantity>0 && this.ticketquantity<100){        // if quantity valid, go ahead , show it.        this.ticketqtyel.innertext="number of tickets: "+this.ticketquantity;      } else {        // if it's not valid, re-run getquantity until is.        this.getquantity();      }    };  };

<div class="ticket-pane">    </div>  <input type="button" class="order-ticket" value="place order!" />

in above ticket class, haven't added first few lines. changes have been internal ticket object. now, when ticket type valid, ticket type , price displayed, , button created listener attached. listener calling function added, getquantity(), prompts valid quantity (and loop until gets one).

this great project start learning javascript objects, , how work incremental development. , yeah, know i'll downvotes being wordy , not answering specific question, imho did. wanted better way structure code, that. can save ticket class external file, , in-page javascript reduced instantiation , 1 event listener.

and, interested, final(-ish) version (get type, quantity, calculate discount , display all), here is:

var ticketel = document.queryselector("div.ticket-pane");  myticket = new ticket(ticketel);    document.queryselector(".order-ticket").addeventlistener("click", function(evt) {    // prevent default behaviour on clicking of button...    evt.preventdefault();    evt.stoppropagation();    /*****     * now, can start ticket generation process.     *  isn't ticket user needs     *  know, functionality contained within ticket.     *****/    myticket.init();  });      function ticket(ticketel) {    var = this;    this.ticketel = ticketel;    createticketdomels();      /****     * functions below act on instance of ticket.     *   public, private.     ****/          this.init = function(){       this.gettype();     }      /****     * function createticketdomels() private, because it's     *   used internally create ticket structure.     *   don't need dom whole worry how     *   structure ticket element, pass blank     *   element me , function fill     *   display fields.     ****/    function createticketdomels() {      // note that, because i've created private function,      //  reference 'this' thrown. i've created reference      //  above that=this, can maintain reference      //  regardless.      that.tickettypeel = document.createelement("div");      that.ticketpriceel = document.createelement("div");      that.ticketqtyel = document.createelement("div");      that.ticketdiscountel = document.createelement("div");      that.tickettotalel = document.createelement("div");      that.ticketel.appendchild(that.tickettypeel);      that.ticketel.appendchild(that.ticketpriceel);      that.ticketel.appendchild(that.ticketqtyel);      that.ticketel.appendchild(that.ticketdiscountel);      that.ticketel.appendchild(that.tickettotalel);      that.tickettypeel.classname = "ticket-type";      that.ticketpriceel.classname = "ticket-price";      that.ticketqtyel.classname = "ticket-quantity";      that.ticketdiscountel.classname = "ticket-discount";      that.tickettotalel.classname = "ticket-total";          }      /****     *  this.gettickettype() public function takes     *    ticket type , returns ticket type.     *    additionally, populate ticket type ,     *    price dom nodes.     *  note: using this.functionname versus var function()     *    determines public versus private functions.     ****/    this.gettype = function() {      this.tickettype = prompt("what type of ticket (a, b or c)?");      switch (that.tickettype.tolowercase()) {        case "a":          this.ticketprice = 100;          break;        case "b":          this.ticketprice = 75;          break;        case "c":          this.ticketprice = 50;          break;        default:          this.ticketprice = null;          // error handling if needed.          }      if (this.ticketprice) {        // if have valid ticket price, can go ahead.        this.ticketpriceel.innertext = "price: $" + this.ticketprice.tofixed(2);        this.tickettypeel.innertext = "ticket type: " + this.tickettype;              // we're adding functionality set      //  quantity, need way call function.      //  these dom elements let call manually.      this.ticketqtybtn = document.createelement("input");      this.ticketqtyel.appendchild(this.ticketqtybtn);      this.ticketqtybtn.type = "button";      this.ticketqtybtn.value = "set quantity";      this.ticketqtybtn.addeventlistener("click", function(){        getquantity();      });      } else {        // no valid ticket price, it's invalid type.        this.tickettypeel.innertext = "an invalid ticket type. please choose either a, b or c."      }    };        /*****     * private function input quantity, , force     *  valid. valid, in case, means between 0 , 100.     *****/    function getquantity(){      that.ticketquantity = parseint(prompt("how many tickets yo u (0-100)?") );      if (that.ticketquantity>0 && that.ticketquantity<100){        // if quantity valid, go ahead , show it.        that.ticketqtyel.innertext="number of tickets: "+that.ticketquantity;                that.grossticketprice = that.ticketprice*that.ticketquantity;                getdiscount();        displaydiscount();      } else {        // if it's not valid, re-run getquantity until is.        getquantity();      }    };        function getdiscount(){      /*****       * private function discount.       *  discount based on ticket price times quantity,       *   saved ticket.grossticketprice. using that, can       *   determine discount percent , amount, saved       *   on our ticket object.       *****/      switch (true){        case that.grossticketprice > 599.99:          that.discountpercent = 0.10;          break;        case that.grossticketprice > 400.00:          that.discountpercent = 0.075;          break;        case that.grossticketprice > 200.00:          that.discountpercent = 0.05;          break;        default:          // fallthrough, none of above applied          that.discountpercent = 0.00;      }      // so, no matter what, have discountpercent      // use calculate discountamount.      that.discountamount = that.grossticketprice*that.discountpercent;      };        /*****     * private function display discount percent, amount ,     *   total cost. point, numbers have been checked     *   , verified, have display them.     *****/    function displaydiscount(){      that.ticketdiscountel.innertext = "total discount ("+that.discountpercent*100+"%): $"+that.discountamount.tofixed(2);      that.tickettotalel.innertext = "total ticket cost: $"+(that.grossticketprice - that.discountamount).tofixed(2);    }  };

<div class="ticket-pane">    </div>  <input type="button" class="order-ticket" value="place order!" />