Split average from cumulative averages

by akmiecik

HTML

<label for="split_miles"><span>split miles</span>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split_miles" class="split" name="bike_split_5" step=".01" value="5"></label><br>
<div>
<br>
<span class="row_title">Cumulative Average @</span><br>
<label for="split_1" class="left_1"><span>5</span>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="bike_ave_5" class="split" name="bike_split_5" step=".01" value="">
</label><label for="split_2" class="left_1"><span>10</span>
<input pattern="[0-9]*" type="number" inputmode="decimal" 
id="bike_ave_10" class="split" name="bike_split_10" step=".01" value="">
</label><label for="split_3" class="left_1"><span>15</span>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="bike_ave_15" class="split" name="bike_split_15" step=".01" value="">
</label><label for="split_4" class="left_1"><span>20</span>
<input pattern="[0-9]*" type="number" inputmode="decimal"  id="bike_ave_20" class="split" name="bike_split_20" step=".01" value="">
</label><label for="split_last" class="left_1"><span>Last</span>
<input pattern="[0-9]*" type="number" inputmode="decimal"  id="bike_ave_last" class="split" name="bike_split_last" step=".01" value="">
</label>
</div>
<div id="split_row"><br><br>
<span class="row_title">Average Split @<span>Last split miles</span>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="last_split_miles" class="split" name="last_split" step=".01" value="">
</span>
<label for="split_ave_5" class="left"><span>5</span>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split_ave_5" class="split" name="split_ave_5" step=".01" value="">
</label><label for="split_ave_10" class="left"><span>10</span>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split_ave_10" class="split" name="split_ave_10" step=".01" value="">
</label><label for="split_ave_15" class="left"><span>15</span>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split_ave_15"...

CSS

.entry-content {color: #000;}
div#row_4 {
    position: absolute;
    width: 96%;
    top: 400px !important;
}
.left {
    float: left;
    margin-left: 3px;
    line-height: 17px;
	 text-align:center;
	 position: relative;
		bottom: 30px;
}
div#row_3 {
    position: absolute;
    top: 448px !important;
}
div#conditions {
    line-height: .9em;
    visibility: hidden;
    position: absolute;
    top: 495px !important;
    width: 86vw;
}

#last_split_miles {
    float: right;
    max-height: 30px;
    position: relative;
    bottom: 20px;
}
.left_1 {
    float: left;
    margin-left: 4px;
    max-width: 62px;
	  text-align: center;
	  position: relative;
    bottom: 10px;
}
.split {
    width: 63px;
}
#row_5 > label:nth-child(11) {
    visibility: hidden;
}
#split_row {position: relative;
top:50px; text-align: left;}
.row_title {position:relative;
bottom: 50px; }

JavaScript

var split_miles = document.getElementById("#split_miles").value;
var ave_5 = document.getElementById("#bike_ave_5").value;
var ave_10 = document.getElementById("#bike_ave_10").value;
var ave_15 = document.getElementById("#bike_ave_15").value;
var ave_20 = document.getElementById("#bike_ave_20").value;
var last = document.getElementById("#bike_ave_last").value;


//document.getElementById('#split_ave_10').value = (ave_10*2*split_miles-ave_5*split_miles)/split_miles;

console.log(document.getElementById("#bike_ave_10").value)