Question

我正在为一个项目编码。我使用数组完成了两个单独的JavaScript计算，这些数组添加了用户输入并提供了它们的总和。每次计算使用不同的具有不同ID的文本框两次。

当我将两者都放入一个html页面并打开时，两者都出现并接受输入，但是只有第二个计算输出，第一个输出字段为空白。

但是当我单独打开它们时，它们都可以工作。我在网上搜索解决方案，但没有找到。

有没有办法将它们保存在一个html文件中，但是以某种方式将它们分开，以免彼此干扰？

如下面的代码所示，计算使用自己的ID，并且两个计算中的每个元素都使用单独的ID，并且对所有3个数组均使用ID。

这是第一次计算的代码：（这是我第一次设计程序，所以请不要过于苛刻地判断混乱情况）

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>

Answer 1

您要用相同的名称-> window.sum两次声明该函数，并用第二个声明有效地覆盖它。更改名称并相应地调用它，例如。 onkeyup="sum()"，onkeyup="sum2()"等

Answer 2

首先，您从未声明变量box3。首先尝试解决该问题，然后在下一篇文章中，如果您声称自己有一个错误，请发布错误。

合并html文档时出现JavaScript计算输出错误（html干扰？）

2 个答案: