Adding Strings vs Integers
When you pull a value from an input with Javascript it is assumed to be a text, or string, value. Even if the text is numeric visually Javascript is going to attempt to concatenate them together as a string.
a = '1', b = '2', c = a+b where c is now 12 instead of 3.
What you can do to avoid this is use parseInt(val). parseInt takes a string input and returns the numeric value of it. If it cannot convert the input to a number it will return NaN or Not a Number.
Your document.getElementById('id').value lines should become parseInt(document.getElementById('id')) or when you go to add them together at the end use parseInt on your variables: parseInt(a) + parseInt(b).
Stoping the Form from Submitting
As other's have mentioned in comments your form is being submitted and taking you to a new page. You can prevent this, like they said, by changing the type on your button to button, <button type="button" onclick="myF()">. Alternatively you can prevent the default submit action with Javascript:
document.getElementById('myForm').addEventListener('submit', myF);
And change your myF declaration to
function myF(event) {
event.preventDefault(); // Stops the default action for the event from firing
..
When assigning a function to an event listener an event parameter is automatically passed in to the function. This is where event comes from even though we didn't specify it in addEventListener.
IDs
In HTML an ID must be unique. You have two f IDs in your example. If you want to bind a label to an input you can use <label for="id"> in this case <label for="f">. If you want to group elements that are similar in style/display use a class. Classes can be applied as many elements on a page.
Don't Repeat Yourself
Is a pretty common practice. Why type document.getElementById(..) 10 times if you don't have to? Assign your inputs you want to sum together a class. If you want a more complex solution follow Yosvel's answer. I'll be taking a bit simpler approach.
var toAdd = document.querySelectorAll('.to-add');
var total = 0;
toAdd.forEach(function(input) {
if ( !Number.isNaN(input.value) ) {
total += input.value;
}
});
querySelectorAll takes in a selector and returns all elements that match. In our case we want all inputs with the class to-add. querySelectorAll returns an NodeList which we can use as an array to loop over with forEach. On each itteration of the loop we check if the input's value is valid (!Number.isNaN) and if it is we add it to our total value.
document.querySelector('#myForm').addEventListener('submit', myF);
function myF(event) {
event.preventDefault();
var toAdd = document.querySelectorAll('.to-add');
var total = 0;
toAdd.forEach(function(input) {
if (!Number.isNaN(input.value)) {
total += Number(input.value);
}
});
document.getElementById('result').value = total;
}
label {
display: block;
}
<form id="myForm">
<label>I.Downpayment 5/14 <input class="to-add" type="text"></label>
<label>II.Progress payment end of week2, @15% 5/30<input class="to-add" type="text" pattern="(\d+)"> </label>
<label>III.Progress payment end of week4, @15% 6/13<input class="to-add" type="text"></label>
<label>IV.Progress payment end of week6, @15% 6/27<input class="to-add" type="text"></label>
<label>V.Progress payment end of week8, @15% 7/11<input class="to-add" type="text"></label>
<label>VI.Progress payment end of week10, @15% 7/25<input class="to-add" type="text"></label>
<label>VII.Progress payment end of week11, @7.5% 8/1<input class="to-add" type="text"></label>
<label>VIII.Progress payment end of week12, @7.5% 8/8<input class="to-add" type="text"></label>
<label>IX.Final Payment @10%<input class="to-add" type="text"></label>
<button id="Total" type="submit" value="Add Numbers">Total</button>
<input type="text" id="result">
</form>
document.getElementById('myForm').addEventListener('submit', myF);
function myF(event) {
event.preventDefault();
var a = parseInt(document.getElementById("a").value);
var b = parseInt(document.getElementById("b").value);
var c = parseInt(document.getElementById("c").value);
var d = parseInt(document.getElementById("d").value);
var e = parseInt(document.getElementById("e").value);
var f = parseInt(document.getElementById("f").value);
var g = parseInt(document.getElementById("g").value);
var h = parseInt(document.getElementById("h").value);
var i = parseInt(document.getElementById("i").value);
var tot = document.getElementById("result").value = a + b + c + d + e + f + g + h + i;
}
body {
background: url(img/Construction-Wallpaper-8.jpg) no-repeat center center;
background-size: 100% 100%;
}
form {
width: 530px;
align-content: center;
margin: 0 auto;
border: solid 1px darkslategrey;
padding: 10px 10px 10px 10px;
display: block;
}
input {
float: right;
clear: both;
position: relative;
top: -4;
}
label {
padding: 8px 10px;
font-family: "Gabriola Regular", arial, sans-serif;
font-size: 18px;
font-weight: bolder;
color: black;
display: block;
}
input#result {
position: relative;
right: 18px;
top: 6px;
}
button#Total {
position: relative;
left: 10px;
top: 5px;
background: linear-gradient(to right, darkslategrey, white);
font-family: "Gabriola Regular", arial, sans-serif;
font-size: 25px;
width: 100px;
height: 30;
text-align: center;
text-transform: uppercase;
box-shadow: 1px 1px 3px;
border: solid 1px black;
}
button#Total:active {
position: relative;
top: 6px;
cursor: pointer;
}
button#Total:hover {
cursor: pointer;
}
p#title {
font-size: 50px;
text-align: center;
padding: 16px 0 0 0;
font-family: "Gabriola Regular", arial, sans-serif;
color: #333;
font-weight: bolder
}
img#Logo {
width: 70px;
display: inline-block;
position: absolute;
top: 8px;
right: 9px;
}
p#Logo {
font-family: "Gabriola Regular", arial, sans-serif;
font-size: 20px;
display: inline-block;
width: 50px;
height: 30px;
position: absolute;
top: -10px;
right: 105px;
}
<p id="title">• Payment Schedule •</p>
<div id="companyName">
<p id="Logo">Christopher Crawford Const.
</p>
<img src="img/Logo_Crawford1ps.png" id="Logo">
</div>
<form id="myForm">
<label>I.Downpayment 5/14 <input id="a" type="number"></label>
<label>II.Progress payment end of week2, @15% 5/30<input id="b" type="text" pattern="(\d+)"> </label>
<label>III.Progress payment end of week4, @15% 6/13<input id="c" type="text"></label>
<label>IV.Progress payment end of week6, @15% 6/27<input id="d" type="text"></label>
<label>V.Progress payment end of week8, @15% 7/11<input id="e" type="text"></label>
<label>VI.Progress payment end of week10, @15% 7/25<input id="f" type="text"></label>
<label>VII.Progress payment end of week11, @7.5% 8/1<input id="g" type="text"></label>
<label>VIII.Progress payment end of week12, @7.5% 8/8<input id="h" type="text"></label>
<label>IX.Final Payment @10%<input id="i" type="text"></label>
<button id="Total" type="submit" value="Add Numbers">Total</button>
<input type="text" id="result">
</form>
