HTML输入框数值求和问题求助（JavaScript实现）

Hey there! Let's figure out why your payment progress calculator isn't summing values correctly and get it working smoothly. I've gone through your code and spotted a few key issues—let's fix them one by one:

1. You're concatenating strings instead of adding numbers #

The value property of input elements returns a string, not a number. When you use + on strings, it just glues them together (e.g., 200 + 300 becomes "200300" instead of 500).

To fix this, convert each input value to a number first. We'll use parseFloat() (perfect for currency values with decimals) and add a fallback of 0 for empty inputs so they don't break the sum with NaN.

2. Your button is triggering a form submit (refreshing the page) #

Since your button is inside a <form> tag, it defaults to a submit button. When you click it, the browser tries to submit the form and reloads the page—so you never get to see the calculated result!

Fix this by adding type="button" to your button (best practice for buttons that don't submit forms).

3. Duplicate ID in your HTML #

You have a <label id="f"> and an <input id="f">—IDs must be unique in HTML. This can cause getElementById to pick the wrong element, leading to unexpected behavior. Let's rename the label's ID to something like label_f.

Updated Working Code #

Let's put all these fixes together:

HTML

<p id="title">&#8226; Payment Schedule &#8226;</p>
<div id="companyName">
  <p id="Logo">Christopher Crawford Const. </p>
  <img src="img/Logo_Crawford1ps.png" id="Logo">
</div>
<form>
  <label>I.Downpayment 5/14 <input id="a" type="text"></label>
  <label>II.Progress payment end of week2, @15% 5/30<input id="b" type="text"></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 id="label_f">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="button" onclick="myF()">Total</button>
  <input type="text" id="result">
</form>

JavaScript

function myF() {
  // Convert each input value to a number, default to 0 if empty
  var a = parseFloat(document.getElementById("a").value) || 0;
  var b = parseFloat(document.getElementById("b").value) || 0;
  var c = parseFloat(document.getElementById("c").value) || 0;
  var d = parseFloat(document.getElementById("d").value) || 0;
  var e = parseFloat(document.getElementById("e").value) || 0;
  var f = parseFloat(document.getElementById("f").value) || 0;
  var g = parseFloat(document.getElementById("g").value) || 0;
  var h = parseFloat(document.getElementById("h").value) || 0;
  var i = parseFloat(document.getElementById("i").value) || 0;
  
  // Calculate total and set the result
  var tot = a + b + c + d + e + f + g + h + i;
  document.getElementById("result").value = tot;
}

CSS (no changes needed here, included for completeness)

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; }

Quick Bonus Tips #

• For better user experience, swap <input type="text"> with <input type="number">—this restricts input to numbers and shows a numeric keyboard on mobile devices.
• To format the total as currency (e.g., $1,234.56), use tot.toFixed(2) for two decimal places, or new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(tot) for full currency formatting.

内容的提问来源于stack exchange，提问作者Laura Mewoo