Pass a string parameter in an onclick function

Pass a string parameter in an onclick function - javascript

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

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.

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.

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

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>

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

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

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

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.

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

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

If you need to pass a variable along with the 'this' keyword, the below code works:
var status = 'Active';
var anchorHTML = '' + data+ '';

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

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".

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">❮</button>
<button class="right" value="next">❯</button>
</div>

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

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

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

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>

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

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.

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

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.

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}")`);

You can use this:
'<input id="test" type="button" value="' + result.name + '" />'
$(document).on('click', "#test", function () {
alert($(this).val());
});
It worked for me.

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

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>

You can use this code in your button onclick method:
<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>

Related

Passing string parameter in JavaScript function

I was trying to pass a string to a JavaScript function.
As it's mentioned here - Pass a string parameter in an onclick function
I'm using this simple code-
<!DOCTYPE html>
<html>
<body>
<script>
name = "Mathew";
document.write("<button id='button' type='button' onclick='myfunction(\''" + name + "'\')'>click</button>")
function myfunction(name)
{
alert(name);
}
</script>
</body>
</html>
But in the console it's giving an error like Uncaught SyntaxError: Unexpected token }.

Change your code to
document.write("<td width='74'><button id='button' type='button' onclick='myfunction(\""+ name + "\")'>click</button></td>")

Rename your variable name to myname, bacause name is a generic property of window and is not writable in the same window.
And replace
onclick='myfunction(\''" + name + "'\')'
With
onclick='myfunction(myname)'
Working example:
var myname = "Mathew";
document.write('<button id="button" type="button" onclick="myfunction(myname);">click</button>');
function myfunction(name) {
alert(name);
}

The question has been answered, but for your future coding reference you might like to consider this.
In your HTML, add the name as an attribute to the button and remove the onclick reference.
<button id="button" data-name="Mathew" type="button">click</button>
In your JavaScript, grab the button using its ID, assign the function to the button's click event, and use the function to display the button's data-name attribute.
var button = document.getElementById('button');
button.onclick = myfunction;
function myfunction() {
var name = this.getAttribute('data-name');
alert(name);
}
DEMO

document.write(`<td width='74'><button id='button' type='button' onclick='myfunction(\``+ name + `\`)'>click</button></td>`)
Better to use `` than "". This is a more dynamic answer.

You can pass string parameters to JavaScript functions like 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);
}

Use this:
document.write('<td width="74"><button id="button" type="button" onclick="myfunction('" + name + "')">click</button></td>')

Try this ...
onclick="myfunction('name')";

How do pass the id of a form onKeyUp?

There's plenty of questions on how to get the value onKeyUp, but I want to pass the id of the form onKeyUp as well.. I tried something like this, but it's telling me getId is not defined.
function getId(x){
$('.not').append(x);
}
var word = 'HELP';
$('.why').html("<form class='questions'><input type='text' id='"+word+"'
name='"+word+"' onkeyup='getId("+word+")'></form> ");
http://jsfiddle.net/evs3A/
Also is putting something like "+variable+" bad practice, because I'm using it quite a lot ;)? Thank u.

Use jQuery to hook up the event and avoid the problem altogether. Try this:
var word = 'HELP';
$('.why').html("<form class='questions'><input type='text' id='" + word + "'
name='" + word + "'></form> ");
$('.questions input').on('keyup', function(e) {
$('.not').append(this.id);
});
Example fiddle

you can change it into this:
$('.why').html("<form class='questions'><input type='text' id='"+word+"'
name='"+word+"'></form> ");
and in jquery:
$(document).ready(function(){
var word = 'HELP';
$(document).on('keyup', '#' + word, function(){
$('.not').append(word); //or $(this).attr('id'); if the id is the argument that you want to pass
});
});
if you want to change a variable to pass you can use data value like this:
<input type='text' id='"+word+"' name='"+word+"' data-something="new_value">
and take it in this mode:
$(document).on('keyup', '#' + word, function(){
$('.not').append(word);
var value = $(this).data('something');
});

Here's a sample without any jQuery.
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', mInit, false);
function mInit()
{
byId('myFormId').addEventListener('keyup', onFormKeyUp, false);
byId('myFormId2').addEventListener('keyup', onFormKeyUp, false);
}
// this function was attached to the form in the mInit function.
// as a consequence, 'this' reffers to the form itself.
// this.id should give us the id of the form
function onFormKeyUp(e)
{
alert("Keyup detected in the form with the id: '" + this.id + "'");
}
</script>
<style>
</style>
</head>
<body>
<form id='myFormId'>
<input id='textField1'/>
<br>
<button>Some button</button>
</form>
<form id='myFormId2'>
<input id='textField2'/>
<br>
<button>Some button</button>
</form>
</body>
</html>

wrapping a text url with <a> tags via jquery find and replace

I am pulling in tweets through a getJSON and writing them to a Google map infowindow with javascript. The problem is, these tweets come with text links but no formatting (and no ids/classes/anything for which to narrow a find and replace). This is the mash of code I'm using right now to find the text, but I can't get it to wrap whatever it finds in <a> tags to properly display the links:
function wrap( str ) {
return '<a href="' + str + '">' + str + '<\/a>';
};
function replaceText() {
var jthis = $(this);
$("*").each(function () {
if (jthis.children().length == 0) {
jthis.text(jthis.text().replace(/\bhttp[^ ]+/i, wrap));
}
});
}
$(document).ready(replaceText);
$("html").ajaxStop(replaceText);
Did I overlook something or does anyone know a better way to do this?

If i understand your problem right, this should work.
not sure why you are iterating through elements as regexp will scan all the text anyway.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script>
function wrap( str ) {
return '<a href="' + str + '">' + str + '<\/a>';
};
function replaceText() {
$(".tweet").each( function(){
$(this).html($(this).html().replace(/\bhttp[^ ]+/ig, wrap));
})
}
$(document).ready(replaceText);
</script>
</head>
<body>
<div class="tweet"> test 1 http://example.com/path </div>
<div class="tweet"> test 2 http://example.com/path </div>
</body>
</html>

How to catch creation of DOM elements and manipulate them with jQuery

I'm trying to devise a method of when adding a simple div element with a class and some data-* in it, it will replace it or add into it some other elements. This method should not be called manually, but automatically by some kind of .live() jQuery method, a custom event or some kind like $('body').bind('create.custom'), etc.
I need it this way since I wouldn't know in advance what elements will be created since they will be served through ajax like single empty div's or p's .
<!DOCTYPE html>
<html>
<head>
<title >on create</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script type="text/javascript" >
jQuery(function($){
$("div.fancyInput").each(function(index,element){
var $div = $(this);
var dataId = $div.attr("data-input-id");
var inputId = '';
var labelId = '';
if(!!dataId){
inputId = 'id="' + dataId + '"';
labelId = 'id="' + dataId + 'Label"';
} // if
var dataValue = $div.attr();
$(
'<p class="fancyInput" >' +
' <label ' + labelId + ' for="' + inputId + '" >A fancy input</label>' +
' <input ' + inputId + ' name="' + inputId + '" value="A fancy input" />' +
'</p>'
).appendTo($div);
}); // .each()
}); // jQuery()
</script>
<script type="text/javascript" >
jQuery(function($){
var counter = 2;
var $form = $('#form');
$('#add').click(function(event){
$('<div class="fancyInput" data-input-id="fancyInput' + counter + '" ></div>').appendTo($form);
counter++;
}); // .click
}); // jQuery()
</script>
</head>
<body>
<a id="add" href="#" > add another one </a>
<form id="form" action="#" >
<p class="normalInput" >
<label id="normalInputLabel" for="normalInput" >A normal input</label>
<input id="normalInput" name="normalInput" value="A normal input" />
</p>
<div class="fancyInput" ></div>
</form>
</body>
</html>
Update:
I checked liveQuery beforehand, it's that kind of functionality that I need, but with the ability to modify DOM elements while the event callback is executed. So it's not just that I need events attached, but the ability to modify the DOM upon element creation. For example: whenever a new is created, it should be filled in (even better if replaced) with the p, label and input tags

You could use a DOM Level 3 Event, like DOMNodeInserted. This could look like:
$(document).bind('DOMNodeInserted', function(event) {
// A new node was inserted into the DOM
// event.target is a reference to the newly inserted node
});
As an alternative, you might checkout the .liveQueryhelp jQuery plugin.
update
In referrence to your comment, have a look at http://www.quirksmode.org/dom/events/index.html, only browser which do not support it are the Internet Explorers of this this world (I guess IE9 does at least).
I can't say much about the performance, but it should perform fairly well.

Attempting to make a phrase generator

I am trying to create a button that upon clicking, fills an input box located right next to it with 3 random words and 2 preset words.
I have the 5 words with JQuery & Javascript going into <p> tags as of now, but I cannot figure out for my life how to get them into the input box.
Here's what I have so far for the JavaScript:
jsfiddle link
It's forcing me to put some of the code, so here is the short amount of HTML I have for it.
<h1>Shakespearean Insult Generator</h1>
<div>
<p id=word4></p>
<p id=word1></p>
<p id="word2"></p>
<p id="word3"></p>
<p id=word5></p>
</div>
<input type="text" name="message" size="50" value="Thou">
<button id="wordGen">Click Me!</button>

It sounds like your only issue is with how to set the value of a text input. Use jQuery's val method to set the value of the text input to the complete sentence that you have constructed. See:
http://api.jquery.com/val/
You should give the text input an id attribute (not necessary, as you could select by name), eg.
<input type="text" name="message" size="50" value="Thou" id="finalMessage">
and then something like this to select and set its value:
// construct the sentence
var finalMessage = 'Thou ' + words1[getWord1()] + ' ' + words2[getWord2()] + ' ' + words3[getWord3()];
// set the value of the text input to the sentence
$("#finalMessage").val(finalMessage);
As others have suggested you could also improve your method of selecting a random word to make it more reusable.

Try this :
$('#wordGen').click(function() {
$('#word1').html("");
$('#word2').html("");
$('#word3').html("");
$('#word1').append('<input value="' + words1[getWord1()] + '"></input>');
$('#word2').append('<input value="' + words2[getWord2()] + '"></input>');
$('#word3').append('<input value="' + words3[getWord3()] + '"></input>');
});
Fiddle : https://jsfiddle.net/DinoMyte/fy1asfws/24/

If you have your three words and you need to put them in the <input>, then you need to use $("#message").val() to set the text for the input. Also, for this to work, you need to add id="message" to the <input> tag so that it becomes <input type="text" id="message" name="message" size="50" value="Thou">. For instance, your code might look like this:
val word1 = words1[getWord1()];
val word2 = words1[getWord2()];
val word3 = words1[getWord3()];
$('#word1').text(word1);
$('#word2').text(word2);
$('#word3').text(word3);
$("#message").val(word1 + " " + word2 + " " + word3);

Essentially, as I can see from the jsfiddle link, your question boils down to how to set the value property of an input field.
As you're using jQuery, this can be done by using the val() method.
In action for your generator:
$('input[name=message]').val(insultFunctionWord1() + insultFunctionWord2());

The javascript alternative is just as concise as the solutions written in jQuery (and, arguably, could be abbreviated further):
function getWord(i) {
var randomNumber = Math.floor(Math.random() * words[(i-1)].length);
return words[(i-1)][randomNumber];
}
document.querySelector('#wordGen').onclick = function() {
var insult = getWord(1) + ' ' + getWord(2) + ' ' + getWord(3);
document.querySelector('input').value = insult;
}
Here is the full solution in plain vanilla javascript:
var words = [
['artless',
'bawdy',
'beslubbering',
'bootless',
'churlish',
'cockered',
'clouted',
'craven',
'currish',
'dankish',
'dissembling',
'droning',
'errant',
'fawning',
'fobbing',
'froward',
'frothy',
'gleeking',
'goatish',
'gorbellied',
'impertinent',
'infectious',
'jarring',
'loggerheaded',
'lumpish',
'mammering',
'mangled',
'mewling',
'paunchy',
'pribbling',
'puking',
'puny',
'qualling',
'rank',
'reeky',
'roguish',
'ruttish',
'saucy',
'spleeny',
'spongy',
'surly',
'tottering',
'unmuzzled',
'vain',
'venomed',
'villainous',
'warped',
'wayward',
'weedy',
'yeasty',
],
['base-court',
'bat-fowling',
'beef-witted',
'beetle-headed',
'boil-brained',
'clapper-clawed',
'clay-brained',
'common-kissing',
'crook-pated',
'dismal-dreaming',
'dizzy-eyed',
'doghearted',
'dread-bolted',
'earth-vexing',
'elf-skinned',
'fat-kidneyed',
'fen-sucked',
'flap-mouthed',
'fly-bitten',
'folly-fallen',
'fool-born',
'full-gorged',
'guts-griping',
'half-faced',
'hasty-witted',
'hedge-born',
'hell-hated',
'idle-headed',
'ill-breeding',
'ill-nurtured',
'knotty-pated',
'milk-livered',
'motley-minded',
'onion-eyed',
'plume-plucked',
'pottle-deep',
'pox-marked',
'reeling-ripe',
'rough-hewn',
'rude-growing',
'rump-fed',
'shard-borne',
'sheep-biting',
'spur-galled',
'swag-bellied',
'tardy-gaited',
'tickle-brained',
'toad-spotted',
'unchin-snouted',
'weather-bitten',
],
['apple-john',
'baggage',
'barnacle',
'bladder',
'boar-pig',
'bugbear',
'bum-bailey',
'canker-blossom',
'clack-dish',
'clotpole',
'coxcomb',
'codpiece',
'death-token',
'dewberry',
'flap-dragon',
'flax-wench',
'flirt-gill',
'foot-licker',
'fustilarian',
'giglet',
'gudgeon',
'haggard',
'harpy',
'hedge-pig',
'horn-beast',
'hugger-mugger',
'joithead',
'lewdster',
'lout',
'maggot-pie',
'malt-worm',
'mammet',
'measle',
'minnow',
'miscreant',
'moldwarp',
'mumble-news',
'nut-hook',
'pigeon-egg',
'pignut',
'puttock',
'pumpion',
'ratsbane',
'scut',
'skainsmate',
'strumpet',
'varlot',
'vassal',
'whey-face',
'wagtail',
]
];
function getWord(i) {
var randomNumber = Math.floor(Math.random() * words[(i-1)].length);
return words[(i-1)][randomNumber];
}
document.querySelector('#wordGen').onclick = function() {
var insult = getWord(1) + ' ' + getWord(2) + ' ' + getWord(3);
document.querySelector('input').value = insult;
}
button {
background-image: url( 'https://media.giphy.com/media/URZcG7uLd9h4s/giphy.gif' );
background-size: 100px 130px;
height: 250;
width: 250;
//background-size: auto;
font: 15px Verdana, sans-serif;
}
h1 {
font: 35px Arial, sans-serif;
}
<h1>Shakespearean Insult Generator</h1>
<input type="text" size="30" />
<button id="wordGen">Click Me!</button>

Develop Reference

JavaScript is the programming language of the Web.

Pass a string parameter in an onclick function - javascript

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

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>

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.

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

If you need to pass a variable along with the 'this' keyword, the below code works: var status = 'Active'; var anchorHTML = '' + data+ '';

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

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">❮</button> <button class="right" value="next">❯</button> </div>

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

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>

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

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.

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}")`);

You can use this: '<input id="test" type="button" value="' + result.name + '" />' $(document).on('click', "#test", function () { alert($(this).val()); }); It worked for me.

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

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>

You can use this code in your button onclick method: <button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>

Related

Passing string parameter in JavaScript function

How do pass the id of a form onKeyUp?

wrapping a text url with <a> tags via jquery find and replace

How to catch creation of DOM elements and manipulate them with jQuery

Attempting to make a phrase generator

Categories

Resources