JavaScript Call Function By Name
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of JavaScript call function by name, here we stored function names in the string because we can use those strings to call the actual function. We can call a JavaScript function whose name is stored in a string variable using window object method.
So when function call initialized we calling actual function with parameter it doing the dynamic change on webpage.
Step By Step Guide On JavaScript Call Function By Name :-
Here we defined div element class ‘exm’ for apply dynamic change and a button ‘Click Me’ defined for initialize fun() function call.
In script we defined two functions ‘chcolor(), fun()’ when user clicks on button it loads fun() function here we defined ‘chcolor’ function name as string and stored on variable ‘stringFun’ then value ‘blue’ stored on variable ‘param’ for passed as parameter for the chcolor function.
Finally using window object we calling chcolor function with parameter ‘blue’ in chcolor function we sets div ‘exm’ color to blue.
<!DOCTYPE html>
<html>
<head>
<title>CALL FUNCTION BY NAME</title>
</head>
<body>
<div class="exm">Welocme to Function Call By Name</div>
<button onclick="fun()">Click Me</button>
<script>
function chcolor(color){
document.querySelector('.exm').style=`color: ${color}`;
}
function fun(){
stringFun="chcolor";
param='blue';
window[stringFun](param);
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined div element class ‘exm’ with contents ‘Welocme to Function Call By Name’ and button defined with onclick event for initialize fun() function call.
- In script fun() function we storing function name ‘chcolor’ and parameter ‘blue’ on strings ‘stringFun,param’ then using window object we calling ‘chcolor’ function.
- In chcolor function defined with passed parameter ‘blue’ identified by variable ‘color’ then we selecting div element with class ‘exm’ and we applied style to changing color to variable color so div element color changed to blue.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to do functions call by name using JavaScript.
When we executing this program on browser we can see div element content ‘Welcome to Function Call By Name’ with button ‘Click Me’ when user clicks on that button it will changing the div element content color to blue color.
We can also modify contents and color to any some other values as per your wish and using this concept except color changes you can try to do other process also.
I hope this tutorial on JavaScript call function by name helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
