javascript - How do I submit user-inputted data and reflect it in a vertical table? -

I am making a beginning and I am trying to write a simple program based on the previous invoice amount Calculates late fees on / payments. I have been stumped in the initial part of this project and basically where I am trying to start, the user is assuming the inverted and showing me in my table below, for some reason I can not understand this I am You can see what I have done so far:

This is the code I'm away from:

   & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" /> & Lt; Meta name = "viewport" content = "width = device-width, initial-scale = 1" /> & Lt; Link rel = "stylesheet" type = "text / css" href = "style.css" & gt; & Lt; Script & gt; Function addRow () {var table = document.getElementByID ("result"); Var line = document.createElement ("tr"); Var td1 = document.createElement ("td"); Var td2 = document.createElement ("td"); Var td3 = document.createElement ("td"); Td1.inner HTML = document.getElementByID ("Invoice Amount"). Values; Td2.innerHTML = document.getElementByID ("Previous Balance"). Values; Td3.innerHTML = document.getElementByID ("Payment Adjustment") value; Row.appendChild (TD1); Row.appendChild (TD2); Row.appendChild (td3); Table.children [0] .appendChild (line); } & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div & gt; & Lt; Form & gt; Invoice amount: & lt; Br> & Lt; Input type = "number" id = "invoice mount" & gt; & Lt; Br> & Lt; Br> Last balance: & lt; Br> & Lt; Input type = "number" id = "previous balance" & gt; & Lt; Br> & Lt; Br> Payment / Adjustment: & lt; Br> & Lt; Input type = "number" id = "payment adjustment" & gt; & Lt; Br> & Lt; Br> & Lt; Input type = "submit" value = "submit" onclick = "addRow ()" & gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; Br> & Lt; Div & gt; & Lt; Table range = "1" id = "result" & gt; & Lt; TR & gt; & Lt; Th & gt; Total Invoice Amount & lt; / Th & gt; & Lt; TD & gt; Data & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Previous balance & lt; / Th & gt; & Lt; TD & gt; Data & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Payment / Adjustment & lt; / Th & gt; & Lt; TD & gt; Data & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Late fees & lt; / Th & gt; & Lt; TD & gt; Data & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Balance (amount set) & lt; / Th & gt; & Lt; TD & gt; Data & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

OK, there are two reasons.

First of all, the "Document.getElementByID" call should be "document. GetElementById" (lower-case D).

However, in order to actually stop submitting your application and reloading the page (and table in clearing data in your case), you can add a 'return false;' At the end of your addRow () function, it will look like this:

  function addRow () {var table = document.getElementById ("result"); Var line = document.createElement ("tr"); Var td1 = document.createElement ("td"); Var td2 = document.createElement ("td"); Var td3 = document.createElement ("td"); Td1.innerHTML = Document. GetElementById ("invoicemount"). Values; Td2.innerHTML = document.getElementById ("Previous Balance"). value; Td3.innerHTML = document.getElementById ("payment adjustment"). Values; Row.appendChild (TD1); Row.appendChild (TD2); Row.appendChild (td3); Table.children [0] .appendChild (line); return false; }  

Then your input tag will look like this:

  & lt; Input type = "submit" value = "submit" onclick = "return addRow ();" & gt;  

Hope that helps!