在JavaScript中对html列求和，然后在警报框中显示
[英]SUM html column in JavaScript and then show in an alert box
问题描述
首先：我是Web开发的新手。 我的问题：我用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: gergo.tamas@student.hu.nl</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>
4 个解决方案
解决方案1
1 2019-02-28 17:38:39
加return sum; 到Calculate() ，并更改total = Calculate.output; total = Calculate();
现在它显示为undefined，因为您无法在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，ect和日期）
解决方案2
0 2019-02-28 17:41:10
计算函数不返回总和。 并且您试图读取错误的输出。 尝试这个：
<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>
解决方案3
0 2019-02-28 17:45:39
- 在popUp（）中，您没有调用Calculate（），而是调用了Calculate.output。 这意味着它将返回一个未定义的值；
- 在Calculate（）中，您没有返回值，但是尝试将总和值放入元素中。 我认为，根据我的理解，您也将需要退还这笔款项。
所以我认为代码可能是：
<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>
解决方案4
0 已采纳 2019-02-28 18:15:40
<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')将选择表中的所有输入标签，您只需要输入编号类型的输入即可。 通过将table.getElementsByTagName('input')更改为table.querySelectorAll('input[type="number"])来更改问题本身，可能还有其他解决方案。 但是请务必检查isNaN因为输入中可能有空值。
javascript警报框显示html货币符号
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.