组合 html 文档时的 JavaScript 计算输出错误(html 干扰?

我正在为一个项目编码。我已经使用数组完成了两个单独的 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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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 文档时，只有最后放置的代码才能正常工作，而排在第一位的代码会将输出返回为空白。

编辑：根据要求找到下面的组合代码。

<!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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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。尝试先解决这个问题，然后在下一篇文章中，如果您声称您有一个错误，请发布错误。

相关内容

最新更新

热门标签：