Untitled

<html>
  <head>
    <style>
      input,span {
        float: right;
        clear: both;
      }
      #shwwk{

        float: left;
      }
    </style>
  </head>
  <body>

    <table>
      <p>Select Hours Per Year
      <select id="hyr">
        <option value="2704">2704</option>
        <option value="2080">2080</option>
      </select></p>
      <th>Old</th>
      <th>New</th>
      <tr>
        <td>Old Annual Salary: <input id='oannu' type="number"></td>
        <td>New Annual Salary: <input id='nannu' type="number"></td>
      </tr>
      <tr>
        <td >Semi: <span id='osem'>NA</span></td>
        <td >Semi: <span id='nsem'>NA</span></td>
      </td>
    </tr>
    <tr>
      <td>Hourly:<span id='ohr'> NA</td>
        <td>Hourly: <span id='nhr'> NA</td>
        </td>
      </tr>
      <tr>
        <td>Old Degree: <input id='degold' float="right"></td>
        <td>New Degree: <input id='degnew'></td>
      </tr>
      <tr>
        <td>Old Team Leader<input id='otl' float="right"></td>
        <td>New Team Leader<input id='ntl'></td>
      </tr>
      <tr>
        <td><input id='onoz'>Old Nozzle</td>
        <td><input id='nnoz'>New Nozzle</td>
      </tr>
      <tr>
        <td><input id='oss'>Old State Supplimental</td>
        <td><input id='nss'>New State Supplimental</td>
      </tr>
      <tr>
        <td><br></td>
      </tr>
      <tr>
        <td><br></td>
      </tr>
      <tr>
        <td><input id='obhr'>Old Base Hourly</td>
        <td><input id='nbhr'>New Base Hourly</td>
      </tr>
      <tr>
        <td><input id='oems'>Old EMS Hourly</td>
        <td><input id='nems'>New EMS Hourly</td>
      </tr>
      <tr>
        <td><input id='oaar'>Old AAR Hourly</td>
        <td><input id='nbhr'>New AAR Hourly</td>
      </tr>
      <tr>
        <td><input id='obhr'>Old Cerificate Hourly</td>
        <td><input id='nbhr'>New Certificate Hourly</td>
      </tr>
      <tr>
        <td><br></td>
      </tr>

      <tr>
        <td><input type="date" id='sto'>Start Old</td>
        <td><input type="date" id='stn'>Start New</td>
      </tr>
      <tr>
        <td><input type="date" id='eo'>End Old</td>
        <td><input type="date" id='en'>End New</td>
      </tr>
      <tr>
        <td id="spr">Pro Rated Old</td>
        <td id="epr">Pro Rated New</td>
      </tr>
      <tr>
        <td>Start Days Per FULL Pay Period<select id="sdpp">
            <option value="15">15</option>
            <option value="16">16</option>
        </select></td>
        <td>End Days Per FULL Pay Period<select id="edpp">
            <option value="15">15</option>
            <option value="16">16</option>
        </select></td>
      </tr>
    </table>
    <p >Prorated Amount for Old Calculated: = <strong><span id="txtst"> NA</span></strong></p>
    <p >Prorated Amount for New Calculated: = <strong><span id="txtend"> NA</span></strong></p>
    <p >Prorated Amount for Total Calculated: = <strong><span id="txttot"> NA</span></strong></p>
    <button id='btn'>Check word</button>
    <p>Show work:</p>
    <p><span id='shwwk'></span></p>


    <script type="text/javascript">
      id('btn').onclick = submit();
      // Execute a function when the user releases a key on the keyboard
      window.addEventListener("keyup", function(event) {
        // Number 13 is the "Enter" key on the keyboard
        if (event.keyCode === 13) {
          // Cancel the default action, if needed
          event.preventDefault();
          submit();
        }
      });

      function submit(){
        setoannu = id('oannu').value;
        setoannu1 = setoannu/24
        id("osem").innerHTML = "<strong>"+ round(setoannu1) + "</strong>";
        setnannu = id('nannu').value;
        setnannu1 = setnannu / 24;
        id("nsem").innerHTML = " <span ><strong>"+round(setnannu1)+"</strong></span>";

        hyr = id('hyr').value;
        setohr = setoannu/hyr;
        id("ohr").innerHTML = " <strong> " + round(setohr) + "</strong>";
        setnhr = setnannu / hyr;
        id("nhr").innerHTML = "<strong> " + round(setnhr) + "</strong>";
        newlength =((new Date(id("en").value) - new Date(id("stn").value)) / (1000 * 3600 * 24))+1;
        id("epr").innerHTML = "Pro Rated New: <strong> " + newlength + "</strong>";
        oldlength = ((new Date(id("eo").value) - new Date(id("sto").value)) / (1000 * 3600 * 24))+1;
        id("spr").innerHTML = "Pro Rated Old: <strong> " + oldlength + "</strong>";
        sdpp = id("sdpp").value;
        stcalc = (setoannu1 / sdpp * oldlength);
        id("txtst").innerHTML = stcalc
        edpp = id("sdpp").value;
        endcalc = (setoannu1 / edpp * newlength);
        id("txtend").innerHTML =endcalc;
        id("txttot").innerHTML = (stcalc+endcalc);
        document.getElementById("shwwk").innerHTML = ('For Old Period claculations - Take Semi monthly Salary: '+setoannu1+'    /(divided) Days in pay period: ' + sdpp +'  * (multiplied) by days in prorated start period: '+ oldlength + '<p>For New period Calculations - Take Semi monthly Salary: ' + setnannu1 + '    /(divided) Days in pay period: ' + edpp + '  * (multiplied) by days in prorated start period: ' + newlength +'</p>' + '<p>For Total Calculated - Take Old Calculated: ' +endcalc+ ' +(plus) New Calculated: '+stcalc);
      }

      function id(id){
        return document.getElementById(id);
      }

      function round(number){
        number = Math.round(number * 100) / 100;
        number = number.toFixed(2);
        return number;
      }
    </script>

  </body>
</html>