Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
JavaScript display the result of a function as HTML?
In this article we are going to learn about JavaScript display the result of a function as HTML.
In JavaScript, a function is similar to a procedure—a collection of statements that carry out an action or compute a value. However, in order for a procedure to be considered a function, it must accept an input and produce an output with an obvious connection between the input and the output.
Syntax
Following is the syntax for function in JavaScript
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
let’s dive into the article to learn more about displaying the result of a function as HTML. To display the result of a function as HTML, you can use –
document.getElementById().innerHTML.
getElementById()in JavaScript
A DOM method called getElementById() is used to locate the element with the ID attribute set to the desired value. When we want to manipulate an element on our document, often, we use this method, which is one of the most popular ones in the HTML DOM. If there are no elements with the given ID, this method returns null.
Syntax
Following is the syntax for getElementById() in JavaScript.
document.getElementById(elementID)
let’s look into the following example for getting better understanding on how to display result of a function as HTML.
Example
In the following example we are running a script to display function as a result.
<!DOCTYPE html>
<html>
<body>
<form name="form1">
<label>M1 Marks:<input type="number" required><span class="required">*</span></label>
<label>M2 Marks:<input type="number" required><span class="required">*</span></label>
<button class="submit">Submit</button>
<div class="output"></div>
</form>
<script>
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input[type="number"]');
const output = document.querySelector('.output');
form.addEventListener('submit', handleSubmit, false);
function handleSubmit(e) {
e.preventDefault();
let total = 0;
for (let i = 0; i < inputs.length; i++) {
total += Number(inputs[i].value);
}
const avg = total / inputs.length;
output.textContent = `Total: ${total}, Avg: ${avg}`;
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an input field for the user to enter a value along with the click button. When the user clicks the button, the event gets triggered and displays the total of the values along with the average between them.
Example
Let’s look into the another example of displaying the JavaScript function as result in HTML.
<!DOCTYPE html>
<html>
<body style = "text-align: center;">
<h1 style = "color: red;"> Hello World</h1>
<button onclick = "fun()"> Click me</button>
<p id = "tutorial"></p>
<script>
function fun() {
var a = prompt("Enter some text");
if (a != null) {
document.getElementById("tutorial").innerHTML = "Welcome to " + a;
}
}
</script>
</body>
</html>
On running the above script, the text along with a click button is displayed on the webbrowser. If the user clicks the button, the event gets triggered, displays an alert prompt, and asks the user to enter text and press ok. After pressing ok, the text entered by the user will be displayed on the webpage.
Example
Considering the example where we are running the script to display the result of a function as HTML.
<!DOCTYPE html>
<html>
<body>
<h1>Click Button To Count CheckBoxes</h1>
<button id="doit">Do it</button><br />
<input type="checkbox">
<input type="radio">
<input type="checkbox">
<input type="text">
<input type="checkbox">
<div id="totalInput"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('doit').addEventListener('click',
function() {
check_total();
});
});
function check_total()
{
var inputElems = document.getElementsByTagName("input"),
total = 0;
for (var i=0; i<inputElems.length; i++) {
if (inputElems[i].type == "checkbox"){
total++;
}
}
document.getElementById('totalInput').innerHTML = total;
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text along with checkboxes, radio buttons, a text field, and a click button on the webpage. When the user clicks the button, an event gets triggered that checks the number of checkboxes and displays them on the webpage.
3K+ Views
