how to pass parameter in onclick function in javascript?

Today, We want to share with you pass parameter to javascript function onclick.In this post we will show you how to pass id in javascript function?, hear for javascript set onclick function with parameters what is a function parameter and multiple arguments pass with the onClick event using JavaScript function. we will give you demo and example for implement.In this post, we will learn about call javascript function from html with an example.

how to pass value to javascript function on button click?

how to call a function in react with arguments onclick?

<button onClick={() => sayHello('Kirit')}>Greet</button>

Example 1: index.html

<!DOCTYPE html>
<html>
<body>

<p>Click "Click it" to call a function with arguments</p>

<button onclick="getPlayerDetails('Rohit sharna','Player')">Click it</button>

<p id="example"></p>

<script>
function getPlayerDetails(name,job) {
  document.getElementById("example").innerHTML = "Grettings to " + name + ", the " + job + ".";
}
</script>

</body>
</html>

How to Pass Parameter in js Function From Html?

index.html

<!DOCTYPE html>
<html>
<head>
	<title>function parameters javascript - www.pakainfo.com</title>
</head>
<body>
<button onclick="getPlayerDetails('Mayuri')">Click</button>

<script type="text/javascript">
	
	function getPlayerDetails(a){

		alert(a);
		
	}

</script>
</body>
</html>

Pass Multiple Parameters to js Function onClick

index.html

<!DOCTYPE html>
<html>
<head>
	<title>multiple parameters function javascript - www.pakainfo.com</title>
</head>
<body>
	<h2 id="result"></h2><h3 id="ageshow"></h3>
	<button onclick="getPlayerDetails('Jalpa', 25)">Click</button>

<script type="text/javascript">
	
	function getPlayerDetails( name,age ){

		document.getElementById("result").innerHTML += name;
		document.getElementById("ageshow").innerHTML += age;
	}

</script>

</body>
</html>

I hope you get an idea about call a function with arguments.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  javascript capitalize first letter of each word

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *