JavaScript | Pass string parameter in onClick function - GeeksforGeeks

21 Jun, 2019
The task is to pass a string as a parameter on onClick function using javascript, we’re going to discuss few techniques.
Example 1: This example simply put the argument which is string in the onClick attribute of the button which calls a function with a string as an argument using onClick() method.
<!DOCTYPE HTML><html>  <head>    <title>        JavaScript       | Pass string parameter in onClick function.    </title></head>  <body style="text-align:center;"       id="body">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP"        style="font-size: 19px;               font-weight: bold;">    </p>    <button onclick="GFG_Fun('Parameter'); ">        click here    </button>    <p id="GFG_DOWN"       style="color: green;               font-size: 24px;              font-weight: bold;">    </p>    <script>        var up =             document.getElementById('GFG_UP');        var down =             document.getElementById('GFG_DOWN');        up.innerHTML =           'Click on button to pass the '+          'string parameter to the function';          function GFG_Fun(parameter) {            down.innerHTML = "String '"             + parameter + "' Received";        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example simply put the argument which is a string in the onClick attribute of the button which calls a function with string as an argument using onClick() method. Here the input button is created dynamically. This example uses the same approach as the previous one.
<!DOCTYPE HTML><html>  <head>    <title>        JavaScript       | Pass string parameter in onClick function.    </title></head>  <body style="text-align:center;"       id="body">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP"       style="font-size: 19px;               font-weight: bold;">    </p>    <p id="GFG_DOWN"       style="color: green;               font-size: 24px;              font-weight: bold;">    </p>    <script>        var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        var inputEl = document.createElement('input');        inputEl.type = 'button';        inputEl.value = "Click here";        inputEl.addEventListener('click', function() {            GFG_Fun('Parameter');        });        document.body.insertBefore(inputEl, down);        up.innerHTML =           'Click on button to pass the '+          'string parameter to the function';          function GFG_Fun(parameter) {            down.innerHTML = "String '" +              parameter + "' Received";        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript
Set the value of an input field in JavaScript
Difference Between PUT and PATCH Request
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?