SUM html column in JavaScript and then show in an alert box
Question
To start: I am a noob with web development. My problem: I have made a page in HTML where there's a table with input fields and after the user has written some numbers they should be able to click on the button and see the sum of a column with some text next to it in an alert box. For now the alert box is showing with the text but instead of the sum it says "undefined". The JS code is down below. Tell me if i should post the HTML part as well.
<!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 answers
solution1
1 2019-02-28 17:38:39
add return sum; to Calculate() , and change total = Calculate.output; to total = Calculate();
Right now it is showing undefined, as you can't access the output variable within the Calculate function.
edit as full code was provided.
Right now there are a couple issues that I can see:
1) you are doing var table = document.getElementById('table'); which selects the element with id=table , however you have it set in html as class="table" . To resolve this, either change your html from class to id, or use let table = document.getElementsByClassName('table')[0] to retrieve the element.
2) You are trying to store sum in the element with id=sum , except no such element exists in the html.
3) when calculating the sum, you are looping over every field (varkode, ects, and date), which are not all number fields
solution2
0 2019-02-28 17:41:10
The calculate function is not returning the sum. And you are trying to read the output wrong. Try this:
<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>
solution3
0 2019-02-28 17:45:39
- In the popUp(), you didn't call to Calculate() but you called Calculate.output. Which means it returns an undefined;
- In Calculate(), you didn't return a value but you try to put the sum value into an element. I think, from my understanding in this context, you will need to return the sum as well.
So I think the code might be:
<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>
solution4
0 ACCPTED 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>
The issue on the question was that the selector table.getElementsByTagName('input') will select all the input tags inside the table, where you needed was only the inputs that are of type number. There can be another more solution by changing just the table.getElementsByTagName('input') to table.querySelectorAll('input[type="number"]) to the question itself. But be sure to check the isNaN as there can be empty values on the input.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.