Добавление строк против целых чисел
Когда вы извлекаете значение из ввода с помощью Javascript, оно считается текстовым или строковым значением. Даже если текст визуально числовой, Javascript попытается объединить их вместе в строку.
a = '1', b = '2', c = a+b, где c теперь 12 вместо 3.
Что вы можете сделать, чтобы избежать этого, это использовать parseInt(val). parseInt принимает строковый ввод и возвращает его числовое значение. Если он не может преобразовать ввод в число, он вернет NaN или не число.
Ваши document.getElementById('id').value строки должны стать parseInt(document.getElementById('id')) или когда вы добавите их вместе в конце, используйте parseInt для ваших переменных: parseInt(a) + parseInt(b).
Остановка отправки формы
Как уже упоминалось в комментариях других, ваша форма отправляется и переносит вас на новую страницу. Вы можете предотвратить это, как они сказали, изменив значение type на кнопке на button, <button type="button" onclick="myF()">. В качестве альтернативы вы можете запретить действие отправки по умолчанию с Javascript:
document.getElementById('myForm').addEventListener('submit', myF);
И измените вашу myF декларацию на
function myF(event) {
event.preventDefault(); // Stops the default action for the event from firing
..
При назначении функции прослушивателю событий параметр функции автоматически передается в функцию. Отсюда event, хотя мы не указали его в addEventListener.
идентификаторы
В HTML идентификатор должен быть уникальным. У вас есть два f идентификатора в вашем примере. Если вы хотите привязать метку к входу, вы можете использовать <label for="id"> в этом случае <label for="f">. Если вы хотите сгруппировать элементы, которые похожи по стилю / отображению, используйте класс. Классы могут быть применены как можно больше элементов на странице.
Не повторяйся
Это довольно распространенная практика. Зачем вводить document.getElementById(..) 10 раз, если не нужно? Назначьте ваши входные данные, которые вы хотите суммировать вместе класс. Если вы хотите более сложное решение, следуйте Yosvel's answer . Я выберу немного более простой подход.
var toAdd = document.querySelectorAll('.to-add');
var total = 0;
toAdd.forEach(function(input) {
if ( !Number.isNaN(input.value) ) {
total += input.value;
}
});
querySelectorAll принимает селектор и возвращает все соответствующих элементов. В нашем случае нам нужны все входные данные с классом to-add. querySelectorAll возвращает NodeList , который мы можем использовать в качестве массива для цикла с forEach. При каждом изменении цикла мы проверяем, является ли значение ввода допустимым (!Number.isNaN), и если это так, мы добавляем его к нашему общему значению.
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>