CODEWITHSUNDEEP
javascripthtml
JasperTack
JasperTack

Reputation: 4447

Pass a string parameter in an onclick function

I would like to pass a parameter (i.e. a string) to an Onclick function.

For the moment, I do this:

var inputString = '<input type="button" onClick="gotoNode(' + result.name + ')" />';

with result.name for example equal to string "Add".

When I click on this button, I have an error that says that "Add is not defined". Since this function call works perfectly with a numeric parameter, I assume that it has something to do with the symbols "" in the string.

How can I fix this problem?

Upvotes: 308

Views: 1382527

Answers (28)

david
david

Reputation: 18258

It looks like you're building DOM elements from strings. You just need to add some quotes around result.name:

let inputString = '<input type="button" onClick="gotoNode(\'' + result.name + '\')" />';

Unfortunately, this won't work if result.name contains special characters, and this may be a security vulnerability if result.name is untrusted input. You need to escape it for the JavaScript string literal context, and for the HTML attribute context, like this:

let escapedName = JSON.stringify(result.name)
  .replace(/&/g, '&amp;')
  .replace(/'/g, '&apos;')
  .replace(/"/g, '&quot;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;');
let inputString = '<input type="button" onClick="gotoNode(' + escapedName + ')" />';

You should really be doing this with proper DOM methods though. There's no need for escaping when you use proper DOM methods:

var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
    gotoNode(result.name);
});

​document.body.appendChild(inputElement);​

Just be aware that if this is a loop or something, result will change before the event fires and you'd need to create an additional scope bubble to shadow the changing variable.

Upvotes: 454

Issah Mubasir
Issah Mubasir

Reputation: 1

<button onclick='viewComment(\"string_value"\",\""+comment+"\")' class='btn btn-primary btn-grad'> View Comment </button>;

function viewComment(empl_id, comment) { //enter code here }

Upvotes: 0

Andam Adam
Andam Adam

Reputation: 21

<button style="background-color: gray;color:white;" onclick="displayAlert('the message')">alert</button>
<script>
    function displayAlert(msg){
        alert(msg);
    }

</script>

Upvotes: 0

Creek
Creek

Reputation: 215

This is work for me:

$(element).attr("onClick", 'functionName(' + "\"" + Object.attribute + "\"" + ')');

Just add \ slash in ()

※Multiple parameters example

"functionName(" + "'" + parameter1 + "','" + parameter2 + "','" + parameter3 + "','" + parameter4 + "','" + parameter5 + "','" + parameter6 + "')"

Upvotes: 1

AgungCode.Com
AgungCode.Com

Reputation: 787

You can use this:

'<input id="test" type="button" value="' + result.name + '" />'

$(document).on('click', "#test", function () {
    alert($(this).val());
});

It worked for me.

Upvotes: 0

Niket
Niket

Reputation: 71

Not escaping double quotes is the cause of OP's problem. A readable approach to escape double quotes is using backticks (MDN). Here is a sample solution:

my_btn.setAttribute('onclick', `my_func("${onclick_var1}", "${onclick_var2}")`);

Upvotes: 0

hariharan
hariharan

Reputation: 21

<!----  script ---->
<script>
function myFunction(x) {
  document.getElementById("demo").style.backgroundColor = x; 
}
</script>

<!---- source ---->
<p id="demo" style="width:20px;height:20px;border:1px solid #ccc"></p>

<!----  buttons & function call ----> 
<a  onClick="myFunction('red')" />RED</a> 
<a  onClick="myFunction('blue')" />BLUE</a> 
<a  onClick="myFunction('black')" />BLACK</a>

Upvotes: 1

Avinash Verma
Avinash Verma

Reputation: 2762

If you are adding buttons or link dynamically and facing the issue then this may be help. I solved it by this way:

var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');

I am new to HTML, jQuery and JavaScript. So maybe my code will not be optimized or syntax, but it was working for me.

Upvotes: 0

DamianToczek
DamianToczek

Reputation: 77

Here is a jQuery solution that I'm using.

jQuery

$("#slideshow button").click(function(){
    var val = $(this).val();
    console.log(val);
});

HTML

<div id="slideshow">
    <img src="image1.jpg">
    <button class="left" value="back">&#10094;</button>
    <button class="right" value="next">&#10095;</button>
</div>

Upvotes: 2

Александр Боярчук
Александр Боярчук

Reputation: 41

If to use for generation of a set of buttons with different parameters of handlers.

JavaScript Closures

let some_button = document.createElement( "button" );
some_button.type = "button";

some_button.onclick = doWithParam( some_param );

function doWithParam( param ){
    return function(){
        alert( param ); // <-- Your code here
    }
}

If we do:

some_button.onclick = foo( some_param );
function foo( param ){
    alert( param );
}

then function foo starts after every updating page.

If we do:

for( let i = 0; i < 10; ++i ){
    var inputElement = document.createElement('input');
    inputElement.type = "button"
    inputElement.addEventListener('click', function(){
        gotoNode(result.name);
    });

 ​   document.body.appendChild(inputElement);​
}

then for all buttons created in the loop, the last value of the parameter is "result.name".

Upvotes: 1

MJ X
MJ X

Reputation: 9044

If your button is generated dynamically:

You can pass string parameters to JavaScript functions like the below code:

I passed three parameters where the third one is a string parameter.

var btn ="<input type='button' onclick='RoomIsReadyFunc("+ID+","+RefId+",\""+YourString+"\");'  value='Room is Ready' />";

// Your JavaScript function

function RoomIsReadyFunc(ID, RefId, YourString)
{
  alert(ID);
  alert(RefId);
  alert(YourString);
}

Upvotes: 13

Jay Jariwala
Jay Jariwala

Reputation: 185

<style type="text/css">
    #userprofile{
        display: inline-block;
        padding: 15px 25px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #FFF;
        background-color: #4CAF50; // #C32836
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        width: 200px;
        margin-bottom: 15px;
    }
    #userprofile:hover {
        background-color: #3E8E41
    }

    #userprofile:active {
        background-color: #3E8E41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    #array {
        border-radius: 15px 50px;
        background: #4A21AD;
        padding: 20px;
        width: 200px;
        height: 900px;
        overflow-y: auto;
    }
</style>

if (data[i].socketid != "") {
    $("#array").append("<button type='button' id='userprofile' class='green_button' name=" + data[i]._id + " onClick='chatopen(name)'>" + data[i].username + "</button></br>");
}
else {
    console.log('null socketid  >>', $("#userprofile").css('background-color'));
    //$("#userprofile").css('background-color', '#C32836 ! important');

    $("#array").append("<button type='button' id='userprofile' class='red_button' name=" + data[i]._id + " onClick='chatopen(name)'>" + data[i].username+"</button></br>");
    $(".red_button").css('background-color','#C32836');
}

Upvotes: 0

PVIJAY
PVIJAY

Reputation: 95

For passing multiple parameters you can cast the string by concatenating it with the ASCII value. Like, for single quotes we can use &#39;:

var str = "&#39;" + str + "&#39;";

The same parameter you can pass to the onclick() event. In most of the cases it works with every browser.

Upvotes: 0

Zahidur Rahman
Zahidur Rahman

Reputation: 1718

Multiple parameters:

bounds.extend(marker.position);
bindInfoWindow(marker, map, infowindow,
    '<b>' + response[i].driver_name + '</b><br>' +
    '<b>' + moment(response[i].updated_at).fromNow() + '</b>
     <button onclick="myFunction(\'' + response[i].id + '\',\'' + driversList + '\')">Click me</button>'
);

Upvotes: 5

Sairam Krish
Sairam Krish

Reputation: 11661

A couple of concerns for me with respect to using string escape in onClick and as the number of arguments grow, it will become cumbersome to maintain.

The following approach will have a one hop - On click - take the control to a handler method and handler method, based on the event object, can deduct the click event and corresponding object.

It also provides a cleaner way to add more arguments and have more flexibility.

<button type="button"
        className="btn btn-default"
        onClick="invoke"
        name='gotoNode'
        data-arg1='1234'>GotoNode</button>

In the JavaScript layer:

  invoke = (event) => {
    let nameOfFunction = this[event.target.name];
    let arg1 = event.target.getAttribute('data-arg1');
    // We can add more arguments as needed...
    window[nameOfFunction](arg1)
    // Hope the function is in the window.
    // Else the respective object need to be used
    })
  }

The advantage here is that we can have as many arguments (in above example, data-arg1, data-arg2, etc.) as needed.

Upvotes: 61

Mohamadjavad Vakili
Mohamadjavad Vakili

Reputation: 3338

Also you can use the grave accent symbol ( ` ) in a string

Try:

`<input type="button" onClick="gotoNode('${result.name}')" />`

For more information, visit MDN and Stack Overflow.

By Chrome, Edge, Firefox (Gecko), Opera, Safari support, but it does not support Internet Explorer.

Upvotes: 10

zokaee hamid
zokaee hamid

Reputation: 542

This is a nice and neat way to send a value or object.

<!DOCTYPE html>
<html>
    <body>
        <h1  onclick="test('wow',this)">Click on this text!</h1>
        <script>
            var test = function(value,object) {
                object.innerHTML= value;
            };
        </script>
    </body>
</html>

Upvotes: 28

Abdul Khaliq
Abdul Khaliq

Reputation: 2285

You can pass a reference or string value. Just put the function inside the double commas "" as per the below snapshot:

Enter image description here

Upvotes: 2

Mawardy
Mawardy

Reputation: 3818

Try this...

HTML:

<button id="a1" type="button" onclick="return a1_onclick('a1')">a1</button>

JavaScript:

<script language="javascript" type="text/javascript">
    function a1_onclick(id) {
        document.getElementById(id).style.backgroundColor = "#F00";
    }
</script>

Note: be sure of sending arguments between ' ' signs like ('a1') in HTML code

Upvotes: 13

Abdullah Tahan
Abdullah Tahan

Reputation: 2119

If you are using ASP.NET you can use JavaScript:

HTML

<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"

JavaScript

function EditSelectedOptionName(id, name) {
    console.log(id);
    console.log(name);
}

Upvotes: 0

Ghadir Farzaneh
Ghadir Farzaneh

Reputation: 458

In Razor, you can pass parameters dynamically:

<a href='javascript:void(0);' onclick='showtotextbox(@Model.UnitNameVMs[i].UnitNameID, "@Model.UnitNameVMs[i].FarName","@Model.UnitNameVMs[i].EngName","@Model.UnitNameVMs[i].Symbol" );'>@Model.UnitNameVMs[i].UnitNameID</a>

Upvotes: 0

Arun
Arun

Reputation: 11

If you need to pass a variable along with the 'this' keyword, the below code works:

var status = 'Active';
var anchorHTML = '<a href ="#" onClick = "DisplayActiveStatus(this,\'' + status + '\')">' + data+ '</a>';

Upvotes: 1

Sandeep G B
Sandeep G B

Reputation: 4015

If the requirement is to reference the global object (JavaScript) in your HTML code, you can try this. [Don't use any quotes (' or ") around the variable]

Fiddle reference.

JavaScript:

var result = {name: 'hello'};
function gotoNode(name) {
    alert(name);
}

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />​

Upvotes: 7

Mario Callejas
Mario Callejas

Reputation: 101

let task = {....}

<button onclick="myFunction('${task}')">Continue task</button></li>

Upvotes: 0

Shujat Munawar
Shujat Munawar

Reputation: 1677

You can use this code in your button onclick method:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>

Upvotes: -1

Sayan Shankhari
Sayan Shankhari

Reputation: 21

The following works for me very well,

<html>
<head>
    <title>HTML Form</title>
</head>
<body>
    <form>
        <input type="button" value="ON" onclick="msg('ON')">
        <input type="button" value="OFF" onclick="msg('OFF')">
    </form>
    <script>
        function msg(x){
            alert(x);
        }
    </script>
</body>
</html>

Upvotes: -1

Kevin Ji
Kevin Ji

Reputation: 10489

I suggest not even using HTML onclick handlers, and use something more common such as document.getElementById.

HTML:

<input type="button" id="nodeGoto" />

JavaScript:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);

Upvotes: 32

Starx
Starx

Reputation: 78961

I am guessing, you are creating a button using JavaScript itself. So, the error in your code is that, it will render in this form

<input type="button" onClick="gotoNode(add)" />'

At this current state, add will be considered as an identifier like variables or function calls. You should escape the value like this

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

Upvotes: 22

Related Questions