Return Value of JavaScript function
Question
I'm pretty new to HTML and JavaScript. I have a table, where I can click on checkboxes. A JavaScript funtion is calculating the sum of the checked boxes and gives the result in a html text field. So far so good.
Now I want to hide code or not, whether the result is lower than 2 or higher, but I don't know which value I can use to check (in the script and the html).
Which value does the function hand over? How is it called?
How can I make sum a global variable without destroying the function?
My code:
function checkTotal() { var sum = 0; document.listForm.total.value = ''; for (i = 0; i < document.listForm.choice.length; i++) { if (document.listForm.choice[i].checked) { sum = sum + parseInt(document.listForm.choice[i].value); } } document.listForm.total.value = sum; } //alert ("Summe: " + ???);
<table> <form name="listForm"> <tr> <td>A</td> <td>Inhalt 1</td> <td><input type="checkbox" name="choice" value="1" onchange="checkTotal()" /></td> </tr> <tr> <td>B</td> <td>Inhalt 2</td> <td rowspan="2" ;> <input type="checkbox" name="choice" value="1" onchange="checkTotal()" /></td> </tr> <tr> <td>Summe:</td> <td><input disabled type="text" size="2" name="total" value="0" /></td> </tr> </form> </table>
4 answers
solution1
2 2020-11-20 18:37:16
In your javascript file, if your make a variable called total and put it outside of your method, you can then update that value every time checkTotal is run.
So:
var total;
function checkTotal() {
var sum = 0;
for (i = 0; i < document.listForm.choice.length; i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
total = sum;
}
function getTotal() {
return total;
}
Then in your html, you can call getTotal() , which will return whatever number total is set to.
solution2
1 2020-11-20 19:28:31
Which value does the function hand over?
None, Your function is not returning any value so there is no handing over anything. If you, however, want to return any value you can do so by the return statement.
ie:
function checkTotal() {
var sum = 0;
document.listForm.total.value = '';
for (i = 0; i < document.listForm.choice.length; i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum;
return sum;
}
So when you call the function you can save its return value
Like :
var total = checkTotal();
How is it called?
Currently its being called using event listener attribute. ie. onChange
its like doing this in javascript
document.querySelectorAll('input[type="checkbox"]')
.forEach(function(){
this.addEventListener("change", checkTotal)
})
How can I make sum a global variable without destroying the function?
You just have to declare the var sum = 0; outside the function in a global scope like this
var sum = 0;
function checkTotal() {
sum = 0;
document.listForm.total.value = '';
for (i = 0; i < document.listForm.choice.length; i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum;
}
any function in javascript inherit the scope from its parents too so anything available before the function is declared, is also available inside the function (unlike php).
A note though: variables declared using let and const are block scoped. Meaning: they can't be accessed from outside their immediate enclosing {...}
Putting everything together and correcting some errors
The final code looks like this.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="list-form">
<table>
<tr>
<td>A</td>
<td>Inhalt 1</td>
<td><input type="checkbox" name="Inhalt_1" value="1"></td>
</tr>
<tr>
<td>B</td>
<td>Inhalt 2</td>
<td><input type="checkbox" name="Inhalt_2" value="1"></td>
</tr>
<tr>
<td>Total:</td>
<td colspan="2"><input disabled type="text" id="total" name="total" value="0" /></td>
</tr>
</table>
</form>
<script src="path/to/your/js/file.js" type="text/javascript"></script>
</body>
</html>
JS
var checkboxes = document.forms[0].querySelectorAll('input[type="checkbox"]'),
inpTotal = document.getElementById('total'),
sum = 0;
// first we define the checkTotal
function checkTotal() {
sum = 0;
checkboxes.forEach(el => {
if (el.checked) sum += +el.value;
});
inpTotal.value = sum;
// alert(sum);
}
// then we add the event listeners
checkboxes.forEach(el => el.addEventListener("change", checkTotal));
PS: It is a good practice to put all your javascript in a seperate file from the html where possible.
solution3
0 2020-11-20 18:33:14
this way : complete page for a test.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form name="list-form">
<table>
<tr>
<td>A</td>
<td>Inhalt 1</td>
<td><input type="checkbox" name="Inhalt_1" value="1"></td>
</tr>
<tr>
<td>B</td>
<td>Inhalt 2</td>
<td><input type="checkbox" name="Inhalt_2" value="1"></td>
</tr>
<tr>
<td>Summe:</td>
<td colspan="2"><input disabled type="text" size="2" name="total" value="0" /></td>
</tr>
</table>
</form>
<script>
const listForm = document.forms['list-form']
;
listForm.onchange=evt=>
{
let sum = (listForm.Inhalt_1.checked ? Number(listForm.Inhalt_1.value) : 0)
+ (listForm.Inhalt_2.checked ? Number(listForm.Inhalt_2.value) : 0)
;
listForm.total.value = sum
}
</script>
</body>
</html>
solution4
0 ACCPTED 2020-11-20 18:37:56
Have a go at this.
I know it is a little complex but it is good practice
I fixed your illegal HTML and moved the inline event handlers to one eventListener
I gave the form an ID, using name is obsolete and not useful
If you plan to submit the form, you will need to rename one of the checkboxes or if you use PHP on the server, add [] to the name to make an array
Here I renamed them and gave them a class to use for the selector
document.getElementById("listForm").addEventListener("input", function() { let sum = 0; const checked = [...this.querySelectorAll(".choice:checked")].map(inp => +inp.value); // get all values from checked and convert to number if (checked.length > 0) sum = checked.reduce((a, b) => a + b); // sum them console.log(sum) document.getElementById("total").value = sum; // show value document.getElementById("showwhen2").classList.toggle("hide", sum < 2); // unhide when >= 2 });
.hide { display: none; }
<form id="listForm"> <table> <tbody> <tr id="A" +> <td>A</td> <td>Inhalt 1</td> <td><input type="checkbox" class="choice" name="choiceA" value="1" /></td> </tr> <tr> <td id="B">B</td> <td>Inhalt 2</td> <td><input type="checkbox" class="choice" name="choiceB" value="1" /></td> </tr> <tr> <td>Summe:</td> <td><input disabled type="text" size="2" name="total" id="total" value="0" /></td> </tr> </tbody> </table> </form> <div id="showwhen2" class="hide">Equal 2</div>
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.