HTML计算器无法显示输入及结果问题求助

Let's get your calculator working properly without touching your existing design. The core issues were small HTML/JS reference mistakes that were preventing input from showing up and calculations from running. Here's the fixed version, plus breakdowns of what was wrong:

First, The Fixed Code #

CSS (unchanged, just adjusted for valid class usage) #

body { background-color: #FFFFFF; background-size: 1500px; } 
#calculator { width: 250px; height: 375px; text-align: center; margin: 90px auto; box-shadow: 10px 10px 10px #010012; background-color: #229EE2; background-size: 7px; border-radius: 30px; border: 3px solid #595959; } 
#display { margin: 30px 0 20px 0; padding-right: 2%; width: 220px; height: 30px; border-radius: 4px; box-shadow: 0px 0px 3px #595959; text-align: right; font: 27px bold; color: #1A3C67; background-color: #78c4ed; } 
.keys { width: 43px; height: 35px; margin-left: 10px; margin-bottom: 20px; box-shadow: 0px 0px 15px #010012; cursor: pointer; font-style: italic; color: lightblue; background-color: rgb(0, 50, 68); font-weight: bold; font-size: 24px; border-radius: 4px; } 
.keys:hover { background: #1998cd; font-weight: bold; color: #1e185e; } 
.keysC { width: 43px; height: 35px; margin-left: 10px; margin-bottom: 20px; box-shadow: 0px 0px 10px #595959; cursor: pointer; font-style: italic; color: #1A3C67; background-color: lightblue; font-weight: bold; font-size: 16px; border-radius: 4px; } 
.keysC:hover { background: #7caad0; font-weight: bold; color: #1A3C67; }

Fixed HTML #

<html> 
<head> 
<title>Financial Calculator</title>
<!-- Embed the CSS above here if you want a single file for easy embedding -->
<style>
/* Paste the CSS code here */
</style>
</head> 
<body> 
<div id="calculator"> 
<div class="fluid-container"> 
<form name="calcForm"> 
<input type="text" id="display" name="ans" value="" class="form-control" placeholder=""> 
<br> 
<div class="row"> 
<div> 
<input type="button" class="keysC" value="C" onClick="document.calcForm.ans.value = ''"> 
<input type="button" class="keysC" value="CE" onClick="document.calcForm.ans.value = ''"> 
<input type="button" class="keysC" value="<--" onClick="document.calcForm.ans.value = document.calcForm.ans.value.slice(0, -1)"> 
<input type="button" class="keysC" value="%" onClick="document.calcForm.ans.value += '%'"> 
</div> 
</div> 
<br> 
<input type="button" class="keys" value="7" onClick="document.calcForm.ans.value += '7'"> 
<input type="button" class="keys" value="8" onClick="document.calcForm.ans.value += '8'"> 
<input type="button" class="keys" value="9" onClick="document.calcForm.ans.value += '9'"> 
<input type="button" class="keysC" value="/" onClick="document.calcForm.ans.value += '/'"> 
<br> 
<input type="button" class="keys" value="4" onClick="document.calcForm.ans.value += '4'"> 
<input type="button" class="keys" value="5" onClick="document.calcForm.ans.value += '5'"> 
<input type="button" class="keys" value="6" onClick="document.calcForm.ans.value += '6'"> 
<input type="button" class="keysC" value="*" onClick="document.calcForm.ans.value += '*'"> 
<br> 
<input type="button" class="keys" value="1" onClick="document.calcForm.ans.value += '1'"> 
<input type="button" class="keys" value="2" onClick="document.calcForm.ans.value += '2'"> 
<input type="button" class="keys" value="3" onClick="document.calcForm.ans.value += '3'"> 
<input type="button" class="keysC" value="-" onClick="document.calcForm.ans.value += '-'"> 
<br> 
<input type="button" class="keys" value="0" onClick="document.calcForm.ans.value += '0'"> 
<input type="button" class="keys" value="." onClick="document.calcForm.ans.value += '.'"> 
<input type="button" class="keys" value="=" onClick="try { document.calcForm.ans.value = eval(document.calcForm.ans.value.replace('%', '/100')) } catch(e) { document.calcForm.ans.value = 'Error' }"> 
<input type="button" class="keysC" value="+" onClick="document.calcForm.ans.value += '+'"> 
</form> 
</div> 
</div> 
</body> 
</html>

What Was Fixed & Why #

1. Form Name Reference: Your original form had name="Financial Calculator" (with a space), but document.calculator couldn't reference it because spaces break JS object naming. I changed it to name="calcForm" so the onClick handlers can correctly target the input field.

2. Duplicate IDs: You had multiple buttons using id="keys" and id="keysC" — HTML requires unique IDs. I switched these to classes (.keys and .keysC) which works exactly the same for styling while keeping your layout intact.

3. Invalid Input Type: <input type="textfield"> isn't a valid HTML input type; it should be <input type="text"> to properly display and accept user input.

4. Reset Button Logic: Original type="reset" would clear the entire form, but we need custom behavior for CE and backspace. I changed those to type="button" and added onClick handlers to clear the input or remove the last character.

5. Percentage Calculation: Added a quick fix for the % button — it replaces % with /100 so the eval() function can calculate percentages correctly, plus added a try/catch block to handle invalid inputs (like typing ++) and show an error message instead of breaking.

This version will work as a standalone file or embedded into your existing website, keeping all your original styling and layout while making the input and calculations fully functional.

内容的提问来源于stack exchange，提问作者amanda fletcher