我正在为一个项目编写代码。我已经使用数组完成了两个单独的JavaScript计算,这些数组添加了用户输入并提供了它的总和。对于每次计算,使用具有不同ID的不同文本框进行两次。
当我将两者都放入一个html页面并打开它时,都显示并接受输入,但只有第二个计算输出,第一个输出字段为空白。
然而,当我单独打开它们时,它们都起作用。我在网上搜索了一个解决方案但没有找到。
有没有办法仍然将它们保存在一个html文件中,但不知何故将它们分开以便它们不会相互干扰?
如下面的代码所示,计算使用它们自己的ID,并且两个计算中的每个元素都使用单个ID以及所有3个数组阵列。
这是第一次计算的代码:(这是我第一次设计一个程序所以不要过于严厉地判断这个混乱)
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var result = document.getElementById('box3');
var myResult = myBox1 * myBox2;
box3.value = myResult;
}
window.sum = () =>
document.getElementById('result2').innerHTML =
Array.from(
document.querySelectorAll('#txt7,#txt8,#box3')
).map(e => parseFloat(e.value) || 0)
.reduce((a, b) => a + b, 0)
Array.from(
document.querySelectorAll('#txt7,#txt8,#box3')
).map(e => parseFloat(e.value) || 0) // to avoid NaN
.reduce((a, b) => a + b, 0)
input[type=text],
select {
width: 35%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
background-color: gainsboro;
border-radius: 4px;
box-sizing: border-box;
}
<html>
<h2>Digifix Payment Solutions</h2>
<h3>Payslip Generator</h3>
<p>Section 2: Enter Reneumeration information below.
<p>
<body>
<div>
<form action="/action_page.php">
<fieldset>
<legend>Reneumeration Information</legend>
<br></br>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>basic calc</title>
</head>
<body>
<tr>
Rate of Pay <br></br>
<td><input id="box1" type="text" placeholder="Enter rate of pay" oninput="calculate()" /></td>
<br></br> Hours Worked <br></br>
<td><input id="box2" type="text" placeholder="Enter hours howrke " oninput="calculate()" /></td>
<br></br> Basic Salary<br></br>
<td><input id="box3" type="text" oninput="calculate()" /></td><br></br>
</tr>
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<script>
</script>
<label for="bonus">Bonus:</label><br>
<input type="text" id="txt7" onkeyup="sum()" placeholder="Enter bonus ">
<br></br>
<label for="ufee">Commision:</label> <br>
<input type="text" id="txt8" onkeyup="sum()" placeholder="Enter earned commission">
<br></br>
<script>
</script>
<label for="result2">Total Reneumeration:</label> <br> R <span type="text" id="result2"></span>
<br></br>
<input type="submit" value="Proceed">
</Form>
</div>
</body>
</html>
上面的代码自己执行并正常运行。
这是第二个代码:
window.sum = () =>
document.getElementById('result').innerHTML =
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3,#txt4')
).map(e => parseFloat(e.value) || 0)
.reduce((a, b) => a + b, 0)
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3,#txt4')
).map(e => parseFloat(e.value) || 0) // to avoid NaN
.reduce((a, b) => a + b, 0)
input[type=text],
select {
width: 35%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
background-color: gainsboro;
border-radius: 4px;
box-sizing: border-box;
}
<html>
<h2>Digifix Payment Solutions</h2>
<h3>Payslip Generator</h3>
<p>Section 2: Enter deduction information below.
<p>
<style>
</style>
<body>
<div>
<form action="/action_page.php">
<fieldset>
<legend>Deduction Information</legend>
<br></br>
<label for="tpercentage">Tax percentage (statistical purpose only)</label> <br>
<input type="text" id="txt0" onkeyup="sum()" placeholder="Enter Tax Percentage" />
<br></br>
<label for="tpayable">Tax payable</label> <br>
<input type="text" id="txt1" onkeyup="sum()" placeholder="Enter Tax Payable">
<br></br>
<label for="maid"> Medical Aid Contribution</label> <br>
<input type="text" id="txt2" onkeyup="sum()" placeholder="Enter Medical-Aid contribution">
<br></br>
<label for="ufee">Union Fee</label> <br>
<input type="text" id="txt3" onkeyup="sum()" placeholder="Enter Union Fee">
<br></br>
<label for="hallowance">Housing Allowance</label> <br>
<input type="text" id="txt4" onkeyup="sum()" placeholder="Enter Housing Allowance">
<br></br>
<script>
</script>
<label for="result">Total Deductions:</label> <br> R <span type="text" id="result"></span>
<br></br>
<input type="submit" value="Proceed">
</Form>
</div>
</body>
</html>
上述代码也可以单独执行和运行。
当我将代码放在一个组合的html doc上时,只有最后定位的代码才能正常工作,而第一个定位的代码会将输出返回为空白。
编辑:按要求查找下面的组合代码。
<!DOCTYPE html>
<html>
<!-- CODE 1 -->
<h2>Digifix Payment Solutions</h2>
<h3>Payslip Generator</h3>
<p>Section 2: Enter Reneumeration information below.
<p>
<style>
input[type=text], select {
width:35%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
background-color:gainsboro;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<body>
<div>
<form action="/action_page.php">
<fieldset>
<legend>Reneumeration Information</legend>
<br></br>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>basic calc</title>
</head>
<body>
<tr>
Rate of Pay <br></br><td><input id="box1" type="text" placeholder="Enter
rate of pay" oninput="calculate()" /></td>
<br></br> Hours Worked <br></br> <td><input id="box2" type="text"
placeholder="Enter hours howrke " oninput="calculate()" /></td>
<br></br> Basic Salary<br></br><td><input id="box3" type="text"
oninput="calculate()" /></td><br></br>
</tr>
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<script>function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var result = document.getElementById('box3');
var myResult = myBox1 * myBox2;
box3.value = myResult;
}
</script>
<label for="bonus">Bonus:</label><br>
<input type="text" id="txt7" onkeyup="sum()" placeholder="Enter bonus ">
<br></br>
<label for="ufee">Commision:</label> <br>
<input type="text" id="txt8" onkeyup="sum()" placeholder="Enter earned commission">
<br></br>
<script>
window.sum= () =>
document.getElementById('result2').innerHTML=
Array.from(
document.querySelectorAll('#txt7,#txt8,#box3')
).map(e=>parseFloat(e.value)||0)
.reduce((a,b)=>a+b,0)
Array.from(
document.querySelectorAll('#txt7,#txt8,#box3')
).map(e => parseFloat(e.value) || 0) // to avoid NaN
.reduce((a, b) => a+b, 0)
</script>
<label for="result2">Total Reneumeration:</label> <br>
R <span type="text" id="result2"></span>
<br></br>
<input type="submit" value="Proceed">
</Form>
</div>
</body>
<!-- CODE 2 -->
<h2>Digifix Payment Solutions</h2>
<h3>Payslip Generator</h3>
<p>Section 2: Enter deduction information below.
<p>
<style>
input[type=text], select {
width:35%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
background-color:gainsboro;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<body>
<div>
<form action="/action_page.php">
<fieldset>
<legend>Deduction Information</legend>
<br></br>
<label for="tpercentage">Tax percentage (statistical purpose only)</label> <br>
<input type="text" id="txt0" onkeyup="sum()" placeholder="Enter Tax Percentage"/>
<br></br>
<label for="tpayable">Tax payable</label> <br>
<input type="text" id="txt1" onkeyup="sum()" placeholder="Enter Tax Payable">
<br></br>
<label for="maid"> Medical Aid Contribution</label> <br>
<input type="text" id="txt2" onkeyup="sum()" placeholder="Enter Medical-Aid contribution">
<br></br>
<label for="ufee">Union Fee</label> <br>
<input type="text" id="txt3" onkeyup="sum()" placeholder="Enter Union Fee">
<br></br>
<label for="hallowance">Housing Allowance</label> <br>
<input type="text" id="txt4" onkeyup="sum()" placeholder="Enter Housing Allowance">
<br></br>
<script>
window.sum= () =>
document.getElementById('result').innerHTML=
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3,#txt4')
).map(e=>parseFloat(e.value)||0)
.reduce((a,b)=>a+b,0)
Array.from(
document.querySelectorAll('#txt1,#txt2,#txt3,#txt4')
).map(e => parseFloat(e.value) || 0) // to avoid NaN
.reduce((a, b) => a+b, 0)
</script>
<label for="result">Total Deductions:</label> <br>
R <span type="text" id="result"></span>
<br></br>
<input type="submit" value="Proceed">
</Form>
</div>
</body>
您使用相同的名称声明该函数两次 - > window.sum
,使用第二个声明有效地覆盖它。更改名称并相应地调用它,例如。 onkeyup="sum()"
,onkeyup="sum2()"
等
首先,你从未声明过变量box3。尝试先解决,然后在下一篇文章中,如果您声称自己有错误,请发布错误。