javaScript Debugging Code Explanation -
i new javascript.
html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>example</title> <style> body { "background-color: #fff; color: #000; font-size: 14px; position: relative;} form { font-size:16px; } </style> </head> <!-- embedded css style --> <body> <div> <header> <h1>example</h1> </header> <div class= "container"> <main> <form> <fieldset> <legend> example </legend> <!--asks name--> <label for="nameinput">name</label> <input type="text" id="nameinput" name="name" placeholder="john doe" /> <br> <!--asks purchase price --> <label for="amt">amount:</label> <input type="text" id="amt"><br> <!--asks state--> <input type="radio" name="statecode" value="k" id="k" checked> kansas <input type="radio" name="statecode" value="c" id="c"> california <input type="radio" name="statecode" value="m" id="m">missouri <br> <label for="tax">tax :</label> <input type="text" id="tax" disabled><br> <label for="totalcost">your total is:</label> <input type="text" id="totalcost" disabled><br> <label> </label> <input type="button" id="calculate" value="calculate"><br> </fieldset> </form> </main> </div><!-- end .container --> </div><!--end of #pushdown --> </body> </html> javascript:
// returns html element (id) var $ = function(id) { return document.getelementbyid(id); }; // calculates total after sales tax function coffeecalc(amt,tax) { var totalcost = amt + tax; totalcost = totalcost.tofixed(2); // 2 decimals return totalcost; // returns value } function init() { // assign variables id , class values html page var amt = parsefloat( $("amt").value); // declaring variables var taxrate; var stateselected; // console log purpose // radio buttons if ($("k").checked) { taxrate = .087; // tax rate: 8.7% stateselected = "kansas"; } else if ($("c").checked) { taxrate = .077; // tax rate: 7.7% stateselected = "california"; } else { taxrate = .09; // tax rate: 9% stateselected = "missouri"; } var tax = amt * taxrate; // shows output $("tax").value = tax.tofixed(2); // 2 decimals $("totalcost").value = coffeecalc(amt,tax); //calls coffeecalc function } image 1: on bottom right side: shows totalcost: input#totalcost. debugger displays amt: 10, therefore think resemble amt except should be: total: 10.87.
image 2: after finish debugging last line: console.log(“total cost: “ + $(“totalcost).value); opens new tab: vm236 amt mean? 
the variable totalcost in screenshot refers dom element, not value coffeecalc function, since has completed time breakpoint has been reached (and totalcost variable locally scoped function).
you can see typing totalcost console (without having broken) there globally-scoped variable called totalcost, value of input element. (see screenshot here)
regarding new tab, debugger continuing step through code that's running. vm... files generated chrome's dev tools scripts have no sourceurl (that have been injected dynamically).
you new js, if haven't already, might want take chrome's official 'getting started' guide debugging.
Comments
Post a Comment