pass string parameter in an onclick function

up vote
176
down vote

favorite

I would like to pass a parameter (i.e. a string) to an Onclick function. For the moment, I do this:

'<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 functioncall works perfect with a numeric parameter, I assume that it has something to do with the symbols "" in the string.
Did anyone had this problem before?

edited Sep 29 '13 at 15:08

asked Mar 10 '12 at 2:05

Consec

1,57532032

1

It might be better in this case to simply not use inline event handlers.
– Felix Kling
Mar 10 '12 at 2:09

1

Your problem is due to the variable not being escaped properly. Check my answer
– Starx
Mar 10 '12 at 2:43

1

I had same question
– Hitesh
Sep 23 '14 at 13:14

add a comment |

up vote
176
down vote

favorite

I would like to pass a parameter (i.e. a string) to an Onclick function. For the moment, I do this:

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

edited Sep 29 '13 at 15:08

asked Mar 10 '12 at 2:05

Consec

1,57532032

1

It might be better in this case to simply not use inline event handlers.
– Felix Kling
Mar 10 '12 at 2:09

1

Your problem is due to the variable not being escaped properly. Check my answer
– Starx
Mar 10 '12 at 2:43

1

I had same question
– Hitesh
Sep 23 '14 at 13:14

add a comment |

up vote
176
down vote

favorite

I would like to pass a parameter (i.e. a string) to an Onclick function. For the moment, I do this:

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

edited Sep 29 '13 at 15:08

asked Mar 10 '12 at 2:05

Consec

1,57532032

I would like to pass a parameter (i.e. a string) to an Onclick function. For the moment, I do this:

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

javascript html

edited Sep 29 '13 at 15:08

asked Mar 10 '12 at 2:05

Consec

1,57532032

edited Sep 29 '13 at 15:08

asked Mar 10 '12 at 2:05

Consec

1,57532032

edited Sep 29 '13 at 15:08

asked Mar 10 '12 at 2:05

Consec

1,57532032

asked Mar 10 '12 at 2:05

Consec

1,57532032

asked Mar 10 '12 at 2:05

Consec

1,57532032

1

It might be better in this case to simply not use inline event handlers.
– Felix Kling
Mar 10 '12 at 2:09

1

Your problem is due to the variable not being escaped properly. Check my answer
– Starx
Mar 10 '12 at 2:43

1

I had same question
– Hitesh
Sep 23 '14 at 13:14

add a comment |

1

It might be better in this case to simply not use inline event handlers.
– Felix Kling
Mar 10 '12 at 2:09

1

Your problem is due to the variable not being escaped properly. Check my answer
– Starx
Mar 10 '12 at 2:43

1

I had same question
– Hitesh
Sep 23 '14 at 13:14

It might be better in this case to simply not use inline event handlers.
– Felix Kling
Mar 10 '12 at 2:09

Your problem is due to the variable not being escaped properly. Check my answer
– Starx
Mar 10 '12 at 2:43

I had same question
– Hitesh
Sep 23 '14 at 13:14

add a comment |

19 Answers
19

active

oldest

votes

up vote
280
down vote

accepted

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

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

You should really be doing this with proper DOM methods though.

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.

edited Jul 31 at 10:34

Community♦

answered Mar 10 '12 at 2:41

david

11.9k23350

5

This formatting of the symbols does work, so thank you very much
– Consec
Mar 10 '12 at 2:46

2

Hi @david..I have one doubt...I want to pass multiple argument in that onclick..how it possible? can you make useful for me..?
– VIVEK-MDU
Aug 22 '13 at 13:25

2

@david,thanks it solved my string parameter issue but now i have to pass (string, boolean). what to do for that?
– Zaveed Abbasi
Jan 21 '14 at 9:17

1

Thanks , it really helped me :)
– Hitesh
Sep 23 '14 at 13:15

2

@david : can you tell little bit why do we need to add quote around that
– Hitesh
Sep 23 '14 at 13:16

|
show 5 more comments

up vote
22
down vote

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);

edited Dec 2 '13 at 0:09

answered Mar 10 '12 at 2:12

mc10

8,34942751

onclick is not a function, it's a property you have to assign a function to: ....onclick = function() {...};
– Felix Kling
Mar 10 '12 at 2:16

@FelixKling Thanks for that, my head's still in jQuery mode.
– mc10
Mar 10 '12 at 2:18

2

You're assuming there will be just one of these inputs.
– Madbreaks
Mar 10 '12 at 2:18

Well the OP's question implies that there will only be one input.
– mc10
Mar 10 '12 at 2:18

I think this option doesn't work for me, because I generate multiple buttons as a result of a search-operation. I could solve this by using a counter to add to the id's but I want to keep it simple and keep it inline
– Consec
Mar 10 '12 at 2:26

add a comment |

up vote
18
down vote

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>

On javascript layer:

  invoke = (event) => {

    let nameOfFunction = this[event.target.name];

    let arg1 = event.target.getAttribute('data-arg1');

    //We can add more args as needed...

    window[nameOfFunction](arg1) 

    //hope function is in 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....) as needed.

edited Apr 18 at 9:06

answered Jul 28 '16 at 9:38

Sairam Krish

3,58612041

1

I'm surprised this isn't getting more upvotes as it is the cleaner method of passing arguments to an event handler.
– Tim O'Brien
Sep 30 '16 at 16:47

thanks @TimO'Brien
– Sairam Krish
Oct 6 '16 at 15:03

add a comment |

up vote
17
down vote

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 + '')" />'

answered Mar 10 '12 at 2:42

Starx

58.1k35155239

add a comment |

up vote
11
down vote

This is a nice and neat way to send 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>

answered Oct 30 '15 at 15:57

zokaee hamid

20629

add a comment |

up vote
5
down vote

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

edited Jan 23 '15 at 20:32

Vasil Lukach

2,85222131

answered Nov 26 '14 at 23:07

Mawardy

8911617

thanks!! been looking for this prob for couple hourss
– cweitat
Jan 26 at 7:31

add a comment |

up vote
5
down vote

Multiple Parameter :

   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>'

    );

answered Nov 7 '16 at 5:41

Zahid Rahman

96311020

add a comment |

up vote
4
down vote

Edited:
If the requirement is to reference the global object (js) 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)" />

edited Mar 10 '12 at 2:33

answered Mar 10 '12 at 2:07

Sandeep G B

2,79642039

I get an error when I try this solution: the part "+ result.name +" is used as string in this case
– Consec
Mar 10 '12 at 2:28

what is "result" object? Is it a global variable declared in JS? like ... var result = {name: 'javascript'};
– Sandeep G B
Mar 10 '12 at 2:30

result contains a record from the jowl library: it's a json-structure with attributes name, type, ...
– Consec
Mar 10 '12 at 2:36

Jaspack, I have updated the answer. Does it work for you now?
– Sandeep G B
Mar 10 '12 at 2:37

Thank you for the example, but that doesn't work in my case: the result variable isn't global, but is a variable within a procedure. So when I call the function with result.name, result isn't known
– Consec
Mar 10 '12 at 2:45

add a comment |

up vote
2
down vote

also you use grave accent symbol ( ` ) in string

try :

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

for more information visit MDN and Stackoverflow

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

edited May 23 '17 at 12:34

Community♦

answered May 1 '16 at 12:58

MJ Vakili

9911321

add a comment |

up vote
2
down vote

if your button is generated dynamically:

You can pass string parameters to javascript functions like below code:

I passed 3 parameters where the third one is a string parameter hope this helps.

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);

}

answered Jun 27 at 10:38

Mehdi Jalal

3,18162450

add a comment |

up vote
1
down vote

You can pass refrence or string value just put function inside the doube commas "" asp below snapshot

enter image description here

answered Feb 24 '15 at 7:04

Ayaat Shifa

71731224

add a comment |

up vote
1
down vote

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

answered Aug 21 '17 at 19:03

Mr-Tc

2116

add a comment |

up vote
0
down vote

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

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

answered Dec 6 '16 at 4:58

PVIJAY

374

add a comment |

up vote
0
down vote

    <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');             

                }

answered May 31 '17 at 13:16

Jay Jariwala

827

add a comment |

up vote
0
down vote

if to use for generation of a set of buttons with different parameters of handlers.
https://www.w3schools.com/js/js_function_closures.asp

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 start 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 "result.name"

edited Jul 5 at 6:01

answered Jul 5 at 5:07

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

214

You need to add some explanation to your code.
– Shihe Zhang
Jul 5 at 5:13

add a comment |

up vote
0
down vote

Here is a Jquery solution what 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">❮</button>

    <button class="right" value="next">❯</button>

</div>

answered Jul 27 at 5:15

DamianToczek

297

add a comment |

up vote
0
down vote

if you are using asp 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);

 }

answered Nov 22 at 5:39

Abdullah Tahan

680613

add a comment |

up vote
-1
down vote

You can use this code in JavaScript file to add button:

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

answered Jan 11 at 13:59

SHUJAT MUNAWAR

405413

add a comment |

up vote
-1
down vote

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>

answered May 11 at 8:29

Sayan Shankhari

OP is not asking about a constant value. This does not answer the question.
– RubioRic
May 11 at 9:23

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f9643311%2fpass-string-parameter-in-an-onclick-function%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

19 Answers
19

active

oldest

votes

19 Answers
19

active

oldest

votes

up vote
280
down vote

accepted

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

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

You should really be doing this with proper DOM methods though.

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.

edited Jul 31 at 10:34

Community♦

answered Mar 10 '12 at 2:41

david

11.9k23350

5

This formatting of the symbols does work, so thank you very much
– Consec
Mar 10 '12 at 2:46

2

Hi @david..I have one doubt...I want to pass multiple argument in that onclick..how it possible? can you make useful for me..?
– VIVEK-MDU
Aug 22 '13 at 13:25

2

@david,thanks it solved my string parameter issue but now i have to pass (string, boolean). what to do for that?
– Zaveed Abbasi
Jan 21 '14 at 9:17

1

Thanks , it really helped me :)
– Hitesh
Sep 23 '14 at 13:15

2

@david : can you tell little bit why do we need to add quote around that
– Hitesh
Sep 23 '14 at 13:16

|
show 5 more comments

up vote
280
down vote

accepted

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

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

You should really be doing this with proper DOM methods though.

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.

edited Jul 31 at 10:34

Community♦

answered Mar 10 '12 at 2:41

david

11.9k23350

5

This formatting of the symbols does work, so thank you very much
– Consec
Mar 10 '12 at 2:46

2

Hi @david..I have one doubt...I want to pass multiple argument in that onclick..how it possible? can you make useful for me..?
– VIVEK-MDU
Aug 22 '13 at 13:25

2

@david,thanks it solved my string parameter issue but now i have to pass (string, boolean). what to do for that?
– Zaveed Abbasi
Jan 21 '14 at 9:17

1

Thanks , it really helped me :)
– Hitesh
Sep 23 '14 at 13:15

2

@david : can you tell little bit why do we need to add quote around that
– Hitesh
Sep 23 '14 at 13:16

|
show 5 more comments

up vote
280
down vote

accepted

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

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

You should really be doing this with proper DOM methods though.

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.

edited Jul 31 at 10:34

Community♦

answered Mar 10 '12 at 2:41

david

11.9k23350

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

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

You should really be doing this with proper DOM methods though.

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.

edited Jul 31 at 10:34

Community♦

answered Mar 10 '12 at 2:41

david

11.9k23350

edited Jul 31 at 10:34

Community♦

edited Jul 31 at 10:34

Community♦

edited Jul 31 at 10:34

Community♦

answered Mar 10 '12 at 2:41

david

11.9k23350

answered Mar 10 '12 at 2:41

david

11.9k23350

answered Mar 10 '12 at 2:41

david

11.9k23350

5

This formatting of the symbols does work, so thank you very much
– Consec
Mar 10 '12 at 2:46

2

Hi @david..I have one doubt...I want to pass multiple argument in that onclick..how it possible? can you make useful for me..?
– VIVEK-MDU
Aug 22 '13 at 13:25

2

@david,thanks it solved my string parameter issue but now i have to pass (string, boolean). what to do for that?
– Zaveed Abbasi
Jan 21 '14 at 9:17

1

Thanks , it really helped me :)
– Hitesh
Sep 23 '14 at 13:15

2

@david : can you tell little bit why do we need to add quote around that
– Hitesh
Sep 23 '14 at 13:16

|
show 5 more comments

5

This formatting of the symbols does work, so thank you very much
– Consec
Mar 10 '12 at 2:46

2

Hi @david..I have one doubt...I want to pass multiple argument in that onclick..how it possible? can you make useful for me..?
– VIVEK-MDU
Aug 22 '13 at 13:25

2

@david,thanks it solved my string parameter issue but now i have to pass (string, boolean). what to do for that?
– Zaveed Abbasi
Jan 21 '14 at 9:17

1

Thanks , it really helped me :)
– Hitesh
Sep 23 '14 at 13:15

2

@david : can you tell little bit why do we need to add quote around that
– Hitesh
Sep 23 '14 at 13:16

This formatting of the symbols does work, so thank you very much
– Consec
Mar 10 '12 at 2:46

Hi @david..I have one doubt...I want to pass multiple argument in that onclick..how it possible? can you make useful for me..?
– VIVEK-MDU
Aug 22 '13 at 13:25

@david,thanks it solved my string parameter issue but now i have to pass (string, boolean). what to do for that?
– Zaveed Abbasi
Jan 21 '14 at 9:17

Thanks , it really helped me :)
– Hitesh
Sep 23 '14 at 13:15

@david : can you tell little bit why do we need to add quote around that
– Hitesh
Sep 23 '14 at 13:16

|
show 5 more comments

up vote
22
down vote

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);

edited Dec 2 '13 at 0:09

answered Mar 10 '12 at 2:12

mc10

8,34942751

onclick is not a function, it's a property you have to assign a function to: ....onclick = function() {...};
– Felix Kling
Mar 10 '12 at 2:16

@FelixKling Thanks for that, my head's still in jQuery mode.
– mc10
Mar 10 '12 at 2:18

2

You're assuming there will be just one of these inputs.
– Madbreaks
Mar 10 '12 at 2:18

Well the OP's question implies that there will only be one input.
– mc10
Mar 10 '12 at 2:18

I think this option doesn't work for me, because I generate multiple buttons as a result of a search-operation. I could solve this by using a counter to add to the id's but I want to keep it simple and keep it inline
– Consec
Mar 10 '12 at 2:26

add a comment |

up vote
22
down vote

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);

edited Dec 2 '13 at 0:09

answered Mar 10 '12 at 2:12

mc10

8,34942751

onclick is not a function, it's a property you have to assign a function to: ....onclick = function() {...};
– Felix Kling
Mar 10 '12 at 2:16

@FelixKling Thanks for that, my head's still in jQuery mode.
– mc10
Mar 10 '12 at 2:18

2

You're assuming there will be just one of these inputs.
– Madbreaks
Mar 10 '12 at 2:18

Well the OP's question implies that there will only be one input.
– mc10
Mar 10 '12 at 2:18

I think this option doesn't work for me, because I generate multiple buttons as a result of a search-operation. I could solve this by using a counter to add to the id's but I want to keep it simple and keep it inline
– Consec
Mar 10 '12 at 2:26

add a comment |

up vote
22
down vote

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);

edited Dec 2 '13 at 0:09

answered Mar 10 '12 at 2:12

mc10

8,34942751

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);

edited Dec 2 '13 at 0:09

answered Mar 10 '12 at 2:12

mc10

8,34942751

edited Dec 2 '13 at 0:09

answered Mar 10 '12 at 2:12

mc10

8,34942751

answered Mar 10 '12 at 2:12

mc10

8,34942751

answered Mar 10 '12 at 2:12

mc10

8,34942751

onclick is not a function, it's a property you have to assign a function to: ....onclick = function() {...};
– Felix Kling
Mar 10 '12 at 2:16

@FelixKling Thanks for that, my head's still in jQuery mode.
– mc10
Mar 10 '12 at 2:18

2

You're assuming there will be just one of these inputs.
– Madbreaks
Mar 10 '12 at 2:18

Well the OP's question implies that there will only be one input.
– mc10
Mar 10 '12 at 2:18

I think this option doesn't work for me, because I generate multiple buttons as a result of a search-operation. I could solve this by using a counter to add to the id's but I want to keep it simple and keep it inline
– Consec
Mar 10 '12 at 2:26

add a comment |

onclick is not a function, it's a property you have to assign a function to: ....onclick = function() {...};
– Felix Kling
Mar 10 '12 at 2:16

@FelixKling Thanks for that, my head's still in jQuery mode.
– mc10
Mar 10 '12 at 2:18

2

You're assuming there will be just one of these inputs.
– Madbreaks
Mar 10 '12 at 2:18

Well the OP's question implies that there will only be one input.
– mc10
Mar 10 '12 at 2:18

I think this option doesn't work for me, because I generate multiple buttons as a result of a search-operation. I could solve this by using a counter to add to the id's but I want to keep it simple and keep it inline
– Consec
Mar 10 '12 at 2:26

onclick is not a function, it's a property you have to assign a function to: ....onclick = function() {...};
– Felix Kling
Mar 10 '12 at 2:16

@FelixKling Thanks for that, my head's still in jQuery mode.
– mc10
Mar 10 '12 at 2:18

You're assuming there will be just one of these inputs.
– Madbreaks
Mar 10 '12 at 2:18

Well the OP's question implies that there will only be one input.
– mc10
Mar 10 '12 at 2:18

I think this option doesn't work for me, because I generate multiple buttons as a result of a search-operation. I could solve this by using a counter to add to the id's but I want to keep it simple and keep it inline
– Consec
Mar 10 '12 at 2:26

add a comment |

up vote
18
down vote

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>

On javascript layer:

  invoke = (event) => {

    let nameOfFunction = this[event.target.name];

    let arg1 = event.target.getAttribute('data-arg1');

    //We can add more args as needed...

    window[nameOfFunction](arg1) 

    //hope function is in 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....) as needed.

edited Apr 18 at 9:06

answered Jul 28 '16 at 9:38

Sairam Krish

3,58612041

1

I'm surprised this isn't getting more upvotes as it is the cleaner method of passing arguments to an event handler.
– Tim O'Brien
Sep 30 '16 at 16:47

thanks @TimO'Brien
– Sairam Krish
Oct 6 '16 at 15:03

add a comment |

up vote
18
down vote

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>

On javascript layer:

  invoke = (event) => {

    let nameOfFunction = this[event.target.name];

    let arg1 = event.target.getAttribute('data-arg1');

    //We can add more args as needed...

    window[nameOfFunction](arg1) 

    //hope function is in 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....) as needed.

edited Apr 18 at 9:06

answered Jul 28 '16 at 9:38

Sairam Krish

3,58612041

1

I'm surprised this isn't getting more upvotes as it is the cleaner method of passing arguments to an event handler.
– Tim O'Brien
Sep 30 '16 at 16:47

thanks @TimO'Brien
– Sairam Krish
Oct 6 '16 at 15:03

add a comment |

up vote
18
down vote

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>

On javascript layer:

  invoke = (event) => {

    let nameOfFunction = this[event.target.name];

    let arg1 = event.target.getAttribute('data-arg1');

    //We can add more args as needed...

    window[nameOfFunction](arg1) 

    //hope function is in 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....) as needed.

edited Apr 18 at 9:06

answered Jul 28 '16 at 9:38

Sairam Krish

3,58612041

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>

On javascript layer:

  invoke = (event) => {

    let nameOfFunction = this[event.target.name];

    let arg1 = event.target.getAttribute('data-arg1');

    //We can add more args as needed...

    window[nameOfFunction](arg1) 

    //hope function is in 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....) as needed.

edited Apr 18 at 9:06

answered Jul 28 '16 at 9:38

Sairam Krish

3,58612041

edited Apr 18 at 9:06

answered Jul 28 '16 at 9:38

Sairam Krish

3,58612041

answered Jul 28 '16 at 9:38

Sairam Krish

3,58612041

answered Jul 28 '16 at 9:38

Sairam Krish

3,58612041

1

I'm surprised this isn't getting more upvotes as it is the cleaner method of passing arguments to an event handler.
– Tim O'Brien
Sep 30 '16 at 16:47

thanks @TimO'Brien
– Sairam Krish
Oct 6 '16 at 15:03

add a comment |

1

I'm surprised this isn't getting more upvotes as it is the cleaner method of passing arguments to an event handler.
– Tim O'Brien
Sep 30 '16 at 16:47

thanks @TimO'Brien
– Sairam Krish
Oct 6 '16 at 15:03

I'm surprised this isn't getting more upvotes as it is the cleaner method of passing arguments to an event handler.
– Tim O'Brien
Sep 30 '16 at 16:47

thanks @TimO'Brien
– Sairam Krish
Oct 6 '16 at 15:03

add a comment |

up vote
17
down vote

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 + '')" />'

answered Mar 10 '12 at 2:42

Starx

58.1k35155239

add a comment |

up vote
17
down vote

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 + '')" />'

answered Mar 10 '12 at 2:42

Starx

58.1k35155239

add a comment |

up vote
17
down vote

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 + '')" />'

answered Mar 10 '12 at 2:42

Starx

58.1k35155239

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 + '')" />'

answered Mar 10 '12 at 2:42

Starx

58.1k35155239

answered Mar 10 '12 at 2:42

Starx

58.1k35155239

answered Mar 10 '12 at 2:42

Starx

58.1k35155239

answered Mar 10 '12 at 2:42

Starx

58.1k35155239

add a comment |

up vote
11
down vote

This is a nice and neat way to send 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>

answered Oct 30 '15 at 15:57

zokaee hamid

20629

add a comment |

up vote
11
down vote

This is a nice and neat way to send 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>

answered Oct 30 '15 at 15:57

zokaee hamid

20629

add a comment |

up vote
11
down vote

This is a nice and neat way to send 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>

answered Oct 30 '15 at 15:57

zokaee hamid

20629

This is a nice and neat way to send 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>

answered Oct 30 '15 at 15:57

zokaee hamid

20629

answered Oct 30 '15 at 15:57

zokaee hamid

20629

answered Oct 30 '15 at 15:57

zokaee hamid

20629

answered Oct 30 '15 at 15:57

zokaee hamid

20629

add a comment |

up vote
5
down vote

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

edited Jan 23 '15 at 20:32

Vasil Lukach

2,85222131

answered Nov 26 '14 at 23:07

Mawardy

8911617

thanks!! been looking for this prob for couple hourss
– cweitat
Jan 26 at 7:31

add a comment |

up vote
5
down vote

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

edited Jan 23 '15 at 20:32

Vasil Lukach

2,85222131

answered Nov 26 '14 at 23:07

Mawardy

8911617

thanks!! been looking for this prob for couple hourss
– cweitat
Jan 26 at 7:31

add a comment |

up vote
5
down vote

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

edited Jan 23 '15 at 20:32

Vasil Lukach

2,85222131

answered Nov 26 '14 at 23:07

Mawardy

8911617

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

edited Jan 23 '15 at 20:32

Vasil Lukach

2,85222131

answered Nov 26 '14 at 23:07

Mawardy

8911617

edited Jan 23 '15 at 20:32

Vasil Lukach

2,85222131

edited Jan 23 '15 at 20:32

Vasil Lukach

2,85222131

edited Jan 23 '15 at 20:32

Vasil Lukach

2,85222131

answered Nov 26 '14 at 23:07

Mawardy

8911617

answered Nov 26 '14 at 23:07

Mawardy

8911617

answered Nov 26 '14 at 23:07

Mawardy

8911617

thanks!! been looking for this prob for couple hourss
– cweitat
Jan 26 at 7:31

add a comment |

thanks!! been looking for this prob for couple hourss
– cweitat
Jan 26 at 7:31

thanks!! been looking for this prob for couple hourss
– cweitat
Jan 26 at 7:31

add a comment |

up vote
5
down vote

Multiple Parameter :

   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>'

    );

answered Nov 7 '16 at 5:41

Zahid Rahman

96311020

add a comment |

up vote
5
down vote

Multiple Parameter :

   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>'

    );

answered Nov 7 '16 at 5:41

Zahid Rahman

96311020

add a comment |

up vote
5
down vote

Multiple Parameter :

   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>'

    );

answered Nov 7 '16 at 5:41

Zahid Rahman

96311020

Multiple Parameter :

   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>'

    );

answered Nov 7 '16 at 5:41

Zahid Rahman

96311020

answered Nov 7 '16 at 5:41

Zahid Rahman

96311020

answered Nov 7 '16 at 5:41

Zahid Rahman

96311020

answered Nov 7 '16 at 5:41

Zahid Rahman

96311020

add a comment |

up vote
4
down vote

Edited:
If the requirement is to reference the global object (js) 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)" />

edited Mar 10 '12 at 2:33

answered Mar 10 '12 at 2:07

Sandeep G B

2,79642039

I get an error when I try this solution: the part "+ result.name +" is used as string in this case
– Consec
Mar 10 '12 at 2:28

what is "result" object? Is it a global variable declared in JS? like ... var result = {name: 'javascript'};
– Sandeep G B
Mar 10 '12 at 2:30

result contains a record from the jowl library: it's a json-structure with attributes name, type, ...
– Consec
Mar 10 '12 at 2:36

Jaspack, I have updated the answer. Does it work for you now?
– Sandeep G B
Mar 10 '12 at 2:37

Thank you for the example, but that doesn't work in my case: the result variable isn't global, but is a variable within a procedure. So when I call the function with result.name, result isn't known
– Consec
Mar 10 '12 at 2:45

add a comment |

up vote
4
down vote

Edited:
If the requirement is to reference the global object (js) 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)" />

edited Mar 10 '12 at 2:33

answered Mar 10 '12 at 2:07

Sandeep G B

2,79642039

I get an error when I try this solution: the part "+ result.name +" is used as string in this case
– Consec
Mar 10 '12 at 2:28

what is "result" object? Is it a global variable declared in JS? like ... var result = {name: 'javascript'};
– Sandeep G B
Mar 10 '12 at 2:30

result contains a record from the jowl library: it's a json-structure with attributes name, type, ...
– Consec
Mar 10 '12 at 2:36

Jaspack, I have updated the answer. Does it work for you now?
– Sandeep G B
Mar 10 '12 at 2:37

Thank you for the example, but that doesn't work in my case: the result variable isn't global, but is a variable within a procedure. So when I call the function with result.name, result isn't known
– Consec
Mar 10 '12 at 2:45

add a comment |

up vote
4
down vote

Edited:
If the requirement is to reference the global object (js) 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)" />

edited Mar 10 '12 at 2:33

answered Mar 10 '12 at 2:07

Sandeep G B

2,79642039

Edited:
If the requirement is to reference the global object (js) 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)" />

edited Mar 10 '12 at 2:33

answered Mar 10 '12 at 2:07

Sandeep G B

2,79642039

edited Mar 10 '12 at 2:33

answered Mar 10 '12 at 2:07

Sandeep G B

2,79642039

answered Mar 10 '12 at 2:07

Sandeep G B

2,79642039

answered Mar 10 '12 at 2:07

Sandeep G B

2,79642039

I get an error when I try this solution: the part "+ result.name +" is used as string in this case
– Consec
Mar 10 '12 at 2:28

what is "result" object? Is it a global variable declared in JS? like ... var result = {name: 'javascript'};
– Sandeep G B
Mar 10 '12 at 2:30

result contains a record from the jowl library: it's a json-structure with attributes name, type, ...
– Consec
Mar 10 '12 at 2:36

Jaspack, I have updated the answer. Does it work for you now?
– Sandeep G B
Mar 10 '12 at 2:37

Thank you for the example, but that doesn't work in my case: the result variable isn't global, but is a variable within a procedure. So when I call the function with result.name, result isn't known
– Consec
Mar 10 '12 at 2:45

add a comment |

I get an error when I try this solution: the part "+ result.name +" is used as string in this case
– Consec
Mar 10 '12 at 2:28

what is "result" object? Is it a global variable declared in JS? like ... var result = {name: 'javascript'};
– Sandeep G B
Mar 10 '12 at 2:30

result contains a record from the jowl library: it's a json-structure with attributes name, type, ...
– Consec
Mar 10 '12 at 2:36

Jaspack, I have updated the answer. Does it work for you now?
– Sandeep G B
Mar 10 '12 at 2:37

Thank you for the example, but that doesn't work in my case: the result variable isn't global, but is a variable within a procedure. So when I call the function with result.name, result isn't known
– Consec
Mar 10 '12 at 2:45

I get an error when I try this solution: the part "+ result.name +" is used as string in this case
– Consec
Mar 10 '12 at 2:28

what is "result" object? Is it a global variable declared in JS? like ... var result = {name: 'javascript'};
– Sandeep G B
Mar 10 '12 at 2:30

result contains a record from the jowl library: it's a json-structure with attributes name, type, ...
– Consec
Mar 10 '12 at 2:36

Jaspack, I have updated the answer. Does it work for you now?
– Sandeep G B
Mar 10 '12 at 2:37

Thank you for the example, but that doesn't work in my case: the result variable isn't global, but is a variable within a procedure. So when I call the function with result.name, result isn't known
– Consec
Mar 10 '12 at 2:45

add a comment |

up vote
2
down vote

also you use grave accent symbol ( ` ) in string

try :

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

for more information visit MDN and Stackoverflow

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

edited May 23 '17 at 12:34

Community♦

answered May 1 '16 at 12:58

MJ Vakili

9911321

add a comment |

up vote
2
down vote

also you use grave accent symbol ( ` ) in string

try :

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

for more information visit MDN and Stackoverflow

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

edited May 23 '17 at 12:34

Community♦

answered May 1 '16 at 12:58

MJ Vakili

9911321

add a comment |

up vote
2
down vote

also you use grave accent symbol ( ` ) in string

try :

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

for more information visit MDN and Stackoverflow

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

edited May 23 '17 at 12:34

Community♦

answered May 1 '16 at 12:58

MJ Vakili

9911321

also you use grave accent symbol ( ` ) in string

try :

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

for more information visit MDN and Stackoverflow

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

edited May 23 '17 at 12:34

Community♦

answered May 1 '16 at 12:58

MJ Vakili

9911321

edited May 23 '17 at 12:34

Community♦

edited May 23 '17 at 12:34

Community♦

edited May 23 '17 at 12:34

Community♦

answered May 1 '16 at 12:58

MJ Vakili

9911321

answered May 1 '16 at 12:58

MJ Vakili

9911321

answered May 1 '16 at 12:58

MJ Vakili

9911321

add a comment |

up vote
2
down vote

if your button is generated dynamically:

You can pass string parameters to javascript functions like below code:

I passed 3 parameters where the third one is a string parameter hope this helps.

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);

}

answered Jun 27 at 10:38

Mehdi Jalal

3,18162450

add a comment |

up vote
2
down vote

if your button is generated dynamically:

You can pass string parameters to javascript functions like below code:

I passed 3 parameters where the third one is a string parameter hope this helps.

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);

}

answered Jun 27 at 10:38

Mehdi Jalal

3,18162450

add a comment |

up vote
2
down vote

if your button is generated dynamically:

You can pass string parameters to javascript functions like below code:

I passed 3 parameters where the third one is a string parameter hope this helps.

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);

}

answered Jun 27 at 10:38

Mehdi Jalal

3,18162450

if your button is generated dynamically:

You can pass string parameters to javascript functions like below code:

I passed 3 parameters where the third one is a string parameter hope this helps.

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);

}

answered Jun 27 at 10:38

Mehdi Jalal

3,18162450

answered Jun 27 at 10:38

Mehdi Jalal

3,18162450

answered Jun 27 at 10:38

Mehdi Jalal

3,18162450

answered Jun 27 at 10:38

Mehdi Jalal

3,18162450

add a comment |

up vote
1
down vote

You can pass refrence or string value just put function inside the doube commas "" asp below snapshot

enter image description here

answered Feb 24 '15 at 7:04

Ayaat Shifa

71731224

add a comment |

up vote
1
down vote

You can pass refrence or string value just put function inside the doube commas "" asp below snapshot

enter image description here

answered Feb 24 '15 at 7:04

Ayaat Shifa

71731224

add a comment |

up vote
1
down vote

You can pass refrence or string value just put function inside the doube commas "" asp below snapshot

enter image description here

answered Feb 24 '15 at 7:04

Ayaat Shifa

71731224

You can pass refrence or string value just put function inside the doube commas "" asp below snapshot

enter image description here

answered Feb 24 '15 at 7:04

Ayaat Shifa

71731224

answered Feb 24 '15 at 7:04

Ayaat Shifa

71731224

answered Feb 24 '15 at 7:04

Ayaat Shifa

71731224

answered Feb 24 '15 at 7:04

Ayaat Shifa

71731224

add a comment |

up vote
1
down vote

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

answered Aug 21 '17 at 19:03

Mr-Tc

2116

add a comment |

up vote
1
down vote

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

answered Aug 21 '17 at 19:03

Mr-Tc

2116

add a comment |

up vote
1
down vote

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

answered Aug 21 '17 at 19:03

Mr-Tc

2116

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

answered Aug 21 '17 at 19:03

Mr-Tc

2116

answered Aug 21 '17 at 19:03

Mr-Tc

2116

answered Aug 21 '17 at 19:03

Mr-Tc

2116

answered Aug 21 '17 at 19:03

Mr-Tc

2116

add a comment |

up vote
0
down vote

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

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

answered Dec 6 '16 at 4:58

PVIJAY

374

add a comment |

up vote
0
down vote

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

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

answered Dec 6 '16 at 4:58

PVIJAY

374

add a comment |

up vote
0
down vote

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

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

answered Dec 6 '16 at 4:58

PVIJAY

374

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "'"+ str+ "'";

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

answered Dec 6 '16 at 4:58

PVIJAY

374

answered Dec 6 '16 at 4:58

PVIJAY

374

answered Dec 6 '16 at 4:58

PVIJAY

374

answered Dec 6 '16 at 4:58

PVIJAY

374

add a comment |

up vote
0
down vote

    <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');             

                }

answered May 31 '17 at 13:16

Jay Jariwala

827

add a comment |

up vote
0
down vote

    <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');             

                }

answered May 31 '17 at 13:16

Jay Jariwala

827

add a comment |

up vote
0
down vote

    <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');             

                }

answered May 31 '17 at 13:16

Jay Jariwala

827

    <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');             

                }

answered May 31 '17 at 13:16

Jay Jariwala

827

answered May 31 '17 at 13:16

Jay Jariwala

827

answered May 31 '17 at 13:16

Jay Jariwala

827

answered May 31 '17 at 13:16

Jay Jariwala

827

add a comment |

up vote
0
down vote

if to use for generation of a set of buttons with different parameters of handlers.
https://www.w3schools.com/js/js_function_closures.asp

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 start 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 "result.name"

edited Jul 5 at 6:01

answered Jul 5 at 5:07

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

214

You need to add some explanation to your code.
– Shihe Zhang
Jul 5 at 5:13

add a comment |

up vote
0
down vote

if to use for generation of a set of buttons with different parameters of handlers.
https://www.w3schools.com/js/js_function_closures.asp

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 start 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 "result.name"

edited Jul 5 at 6:01

answered Jul 5 at 5:07

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

214

You need to add some explanation to your code.
– Shihe Zhang
Jul 5 at 5:13

add a comment |

up vote
0
down vote

if to use for generation of a set of buttons with different parameters of handlers.
https://www.w3schools.com/js/js_function_closures.asp

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 start 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 "result.name"

edited Jul 5 at 6:01

answered Jul 5 at 5:07

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

214

if to use for generation of a set of buttons with different parameters of handlers.
https://www.w3schools.com/js/js_function_closures.asp

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 start 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 "result.name"

edited Jul 5 at 6:01

answered Jul 5 at 5:07

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

214

edited Jul 5 at 6:01

answered Jul 5 at 5:07

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

214

answered Jul 5 at 5:07

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

214

answered Jul 5 at 5:07

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

214

You need to add some explanation to your code.
– Shihe Zhang
Jul 5 at 5:13

add a comment |

You need to add some explanation to your code.
– Shihe Zhang
Jul 5 at 5:13

You need to add some explanation to your code.
– Shihe Zhang
Jul 5 at 5:13

add a comment |

up vote
0
down vote

Here is a Jquery solution what 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">❮</button>

    <button class="right" value="next">❯</button>

</div>

answered Jul 27 at 5:15

DamianToczek

297

add a comment |

up vote
0
down vote

Here is a Jquery solution what 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">❮</button>

    <button class="right" value="next">❯</button>

</div>

answered Jul 27 at 5:15

DamianToczek

297

add a comment |

up vote
0
down vote

Here is a Jquery solution what 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">❮</button>

    <button class="right" value="next">❯</button>

</div>

answered Jul 27 at 5:15

DamianToczek

297

Here is a Jquery solution what 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">❮</button>

    <button class="right" value="next">❯</button>

</div>

answered Jul 27 at 5:15

DamianToczek

297

answered Jul 27 at 5:15

DamianToczek

297

answered Jul 27 at 5:15

DamianToczek

297

answered Jul 27 at 5:15

DamianToczek

297

add a comment |

up vote
0
down vote

if you are using asp 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);

 }

answered Nov 22 at 5:39

Abdullah Tahan

680613

add a comment |

up vote
0
down vote

if you are using asp 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);

 }

answered Nov 22 at 5:39

Abdullah Tahan

680613

add a comment |

up vote
0
down vote

if you are using asp 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);

 }

answered Nov 22 at 5:39

Abdullah Tahan

680613

if you are using asp 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);

 }

answered Nov 22 at 5:39

Abdullah Tahan

680613

answered Nov 22 at 5:39

Abdullah Tahan

680613

answered Nov 22 at 5:39

Abdullah Tahan

680613

answered Nov 22 at 5:39

Abdullah Tahan

680613

add a comment |

up vote
-1
down vote

You can use this code in JavaScript file to add button:

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

answered Jan 11 at 13:59

SHUJAT MUNAWAR

405413

add a comment |

up vote
-1
down vote

You can use this code in JavaScript file to add button:

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

answered Jan 11 at 13:59

SHUJAT MUNAWAR

405413

add a comment |

up vote
-1
down vote

You can use this code in JavaScript file to add button:

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

answered Jan 11 at 13:59

SHUJAT MUNAWAR

405413

You can use this code in JavaScript file to add button:

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

answered Jan 11 at 13:59

SHUJAT MUNAWAR

405413

answered Jan 11 at 13:59

SHUJAT MUNAWAR

405413

answered Jan 11 at 13:59

SHUJAT MUNAWAR

405413

answered Jan 11 at 13:59

SHUJAT MUNAWAR

405413

add a comment |

up vote
-1
down vote

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>

answered May 11 at 8:29

Sayan Shankhari

OP is not asking about a constant value. This does not answer the question.
– RubioRic
May 11 at 9:23

add a comment |

up vote
-1
down vote

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>

answered May 11 at 8:29

Sayan Shankhari

OP is not asking about a constant value. This does not answer the question.
– RubioRic
May 11 at 9:23

add a comment |

up vote
-1
down vote

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>

answered May 11 at 8:29

Sayan Shankhari

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>

answered May 11 at 8:29

Sayan Shankhari

answered May 11 at 8:29

Sayan Shankhari

answered May 11 at 8:29

Sayan Shankhari

answered May 11 at 8:29

Sayan Shankhari

OP is not asking about a constant value. This does not answer the question.
– RubioRic
May 11 at 9:23

add a comment |

OP is not asking about a constant value. This does not answer the question.
– RubioRic
May 11 at 9:23

OP is not asking about a constant value. This does not answer the question.
– RubioRic
May 11 at 9:23

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi