How to Pass Value to a Onclick Function in (Jade)Pug

How to pass value to a onclick function in (Jade)pug?

When adding attributes to an html element, you are already within the scope of pug, so you can just use pug variables like regular js variables.

button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick='gotoBlog(' + val.link + ')')

In Jade, how to pass parameters in the onclick function call

The problem here is that javascript is expecting quotes around functions. What jade is making is <a id='myLinkTag' onclick='myFunction(userid) href=''>

This is not what javascript is expecting, Javascript expects a valid variable name to be given to its onclick functions. There are two choices:

If you are SURE that there is NO WAY for user._id to ever be anything other than a string ONLY CONTAINING alphanumeric characters (new RegExp(/^(A-Za-z0-9)+$/)) then put quotes in myFunction: a(id='myLinkTag' onclick='myFunction(\'' + user._id + '\')' href='') Delete
If user._id can be more than alphanumeric characters, you can instead use jade to set a class and a custom attribute like a(id='myLinkTag' class="myclass" userid=user._id href='') Delete then in javascript you can:

$(".myclass").click(function(e){    var userid = $(e.target).attr("userid");    console.log(userid);    alert(userid);});

Jade would be:
a(id='myLinkTag' class="myclass" userid=user._id href='#')a(id='myLinkTag2' class="myclass" userid=user2._id href='#')a(id='myLinkTag3' class="myclass" userid=user3._id href='#')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a class="myclass" userid="myuserid" href="#">link</a><a class="myclass" userid="myuserid2" href="#">link2</a><a class="myclass" userid="myuserid3" href="#">link3</a>

Button onClick using .jade with a JS function

Your issue comes from mixing server-side pug/jade and client-side JavaScript.

Let's focus on your button code:

button(onClick = #{screenshots(client)}) GO

The #{} is a pug instruction to insert the value of a variable into that space. At the time the button is pressed you just want it to call a local script, and no pug/jade is needed for that:

button(onClick= "screenshots(client)") GO

The error code you get is due to trying to call a function where pug/jade is expecting an expression that it can evaluate to a string.

I can't be sure as I don't know how your file system is set up, but you probably need to reference the script using an absolute path:

script (src='/scripts/screenshot.js')

Pass variable to onClick Function

Your concatenation is fine (as long as strDocument has a value that when concatenated with the static text forms a valid URL).

But, this is much simpler when it comes to <a> elements - no onclick needed because <a> elements can target new windows with the target attribute.

function getLink(){  var someData = "foo";  return "some/path/" + someData;  console.log(link.href);}

<a href="javascript:getLink()" target="_blank" id="testLink">test</a>

Onclick function pug from node

The res.render statement is only meant to send data to the template, you can't send a function through there. The Express documentation explains this.

The function is running when you request the page because that's actually what you're telling it to do when you include that function in there.

You will need to write some client-side JavaScript to make an AJAX call or form POST then create a new ExpressJS route on the server to capture that and run the function.

How to Pass Value to a Onclick Function in (Jade)Pug