To display the result of a function as HTML, you can use −
document.getElementById().innerHTML.
Example
Following is the code −
<!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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div>
<input type="text">
<br>
<input type="text">
<br>
<input type="radio">
<br>
<input type="text">
<br>
<input type="radio">
<br>
</div>
<br>
<span id='totalNumberOfTextBox'></span>
</body>
<script>
total_number_of_check_box();
function total_number_of_check_box() {
var inputObj = document.getElementsByTagName("input"),
counter = 0;
for (var i = 0; i < inputObj.length; i++) {
if (inputObj[i].type == "text") {
counter++;
}
}
document.getElementById('totalNumberOfTextBox').innerHTML = "Total
Number of text box is=" + counter;
}
</script>
</html>To run the above program, save the file name anyName.html(index.html). Right click on the file and select the option “Open with live server” in VS Code editor.
Output
This will produce the following output −
