在JavaScript中使用SUM html列，然后在警告框中显示

问题描述 投票：0回答：4

首先：我是网络开发的菜鸟。我的问题：我在HTML中创建了一个页面，其中有一个包含输入字段的表格，在用户编写了一些数字之后，他们应该能够点击按钮，并在警报中查看旁边有一些文本的列的总和框。现在，警告框显示的是文本，而不是显示“未定义”的总和。 JS代码如下。告诉我是否应该发布HTML部分。

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="voortgangpagina.css">
</head>
<div class="topnav">
  <a style="font-family: Arial" href="homepagina.html">Home</a>
  <a style="font-family: Arial" href="profielpagina.html">Profiel</a>
  <a style="font-family: Arial" class="active">Voortgang</a>
</div>

<div class="title" style="margin-left:100px">
  <h1 style="font-family: Arial">Voortgang</h1>
</div>

<div class="table" style="margin-left:100px">
  <table style="width: 20%">
    <tr>
    <th>Vakcode</th>
    <th>ECTS</th>
    <th>Datum behaald</th>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
</table><br>
<button onclick="popUp()" class="myBtn" type="button">Bereken studietempo</button>

</div>


<div class="details" style="margin-left: 400px">
  <p style="font-family: Arial">Naam: Gergo Tamas</p>
  <p style="font-family: Arial">Telefoon: 0631947009</p>
  <p style="font-family: Arial">E-mail: [email protected]</p>
  <img src="map.png" alt="map" style="width:300px"><br><br>
  <img src="graph.png" alt="graph" style="width:300px">
</div>

<div class="profielicon">
    <img src="profielicon.jpg"/>
</div>

<div class="nameprofilepic">
  <h4 style="font-family: Arial">Gergo Tamas</h4>
</div>

<footer id= "footer1">
  <hr>
    <p style="font-family: Arial">Deze opdracht is gemaakt in het kader van het vak Analyse & User Interface</p>
  </footer>
  <br>

  <footer id = "footer2">
    <p style="font-family: Arial">Auteur: Gergo Tamas</p>
  </footer>

  <footer id = "footer3">
    <p style="font-family: Arial">Datum: 13 - 02 - 2019</p>
  </footer>

<script type="text/javascript">

  function Calculate() {
      var table = document.getElementById('table');
      var items = table.getElementsByTagName('input');
      var sum = 0;
      for(var i=0; i<items.length; i++)
          sum += parseInt(items[i].value);
      var output = document.getElementById('sum');
      output.innerHTML = sum;
      return sum;
  }

  function popUp() {
    total = Calculate();
    alert("Je hebt to nu toe " + total + "ECTS behaald." );
  }


</script>

</html>
javascript html
4个回答
0
投票

<div id="table" style="margin-left:100px">
  <table style="width: 20%">
    <tr>
    <th>Vakcode</th>
    <th>ECTS</th>
    <th>Datum behaald</th>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
  <tr>
    <td><input type="text" name="fname" /></td>
    <td><input type="number" name="code" /></td>
    <td><input type="date" name="date"></td>
  </tr>
</table>
<br />
<button onclick="popUp()" class="myBtn" type="button">Bereken studietempo</button>
<br />
Total is : <span id="sum"></span>
<script type="text/javascript">

  function Calculate() {
      var table = document.getElementById('table');
      var items = table.getElementsByTagName('input');
      var sum = 0;
      for (var i = 0; i < items.length; i ++)
        sum += items[i].type == 'number' && ! isNaN(parseInt(items[i].value)) ? parseInt(items[i].value) : 0;
      var output = document.getElementById('sum');
      output.innerHTML = sum;
      return sum;
  }

  function popUp() {
    total = Calculate();
    alert("Je hebt to nu toe " + total + "ECTS behaald." );
  }


</script>

</html>

关于这个问题的问题是选择器table.getElementsByTagName('input')将选择表中的所有输入标签，您需要的只是输入类型为number的输入。通过将table.getElementsByTagName('input')改为table.querySelectorAll('input[type="number"])到问题本身，可以有另一种解决方案。但一定要检查isNaN，因为输入上可能有空值。

1
投票

将return sum;添加到Calculate()，并将total = Calculate.output;更改为total = Calculate();

现在它显示未定义，因为您无法访问Calculate函数中的输出变量。

编辑为完整代码。

现在我可以看到几个问题：

1）你正在做var table = document.getElementById('table');，用id=table选择元素，但你把它设置为html为class="table"。要解决此问题，请将html从类更改为id，或使用let table = document.getElementsByClassName('table')[0]检索元素。

2）你试图用sum将id=sum存储在元素中，除了html中不存在这样的元素。

3）计算总和时，你循环遍历每个字段（varkode，ects和date），这些字段不是所有数字字段

0
投票

计算函数不返回总和。而你正试图读错输出。试试这个：

<script type="text/javascript">

  function Calculate() {
      var table = document.getElementById('table');
      var items = table.getElementsByTagName('input');
      var sum = 0;
      for(var i=0; i<items.length; i++)
          sum += parseInt(items[i].value);
      var output = document.getElementById('sum');
      output.innerHTML = sum;
      return sum;
  }

  function popUp() {
    total = Calculate();
    alert("Je hebt to nu toe " + total + "ECTS behaald." );
  }


</script>
0
投票
  1. 在popUp（）中，您没有调用Calculate（），而是调用了Calculate.output。这意味着它返回一个未定义的;
  2. 在Calculate（）中，您没有返回值，但是您尝试将sum值放入元素中。我认为，根据我在这种情况下的理解，你也需要返还总和。

所以我认为代码可能是：

<script type="text/javascript">

  function Calculate() {
      var table = document.getElementById('table');
      var items = table.getElementsByTagName('input');
      var sum = 0;
      for(var i=0; i<items.length; i++)
          sum += parseInt(items[i].value);
      var output = document.getElementById('sum');
      output.innerHTML = sum;
      return sum;
  }

  function popUp() {
    total = Calculate();
    alert("Je hebt to nu toe " + total + "ECTS behaald." );
  }


</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.