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

问题描述 投票:0回答:2

我正在为一个项目编写代码。我已经使用数组完成了两个单独的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 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>&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>

javascript html
2个回答
1
投票

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.