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

Question

I am new to jade and stuck on this issue. I think I have tried everything from the StackOverflow posts and still at nothing.

The things I have tried

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

Error

1:8 Uncaught SyntaxError: Invalid or unexpected token

Changing it to !{val.link}

Error

Uncaught SyntaxError: Unexpected token .

Changing it to "!{val.link}" and "#{val.link}" just gives me string understandably so. BTW val.link is a string

Just giving val.link says Uncaught ReferenceError: val is not defined

I am out of options now. Help will be appreciated.

Thanks

Blow

Where are you setting/defining val? – Ashti

Answer 1

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

Ashti

Answer 2

I've just used the code with pre and pos quotes and it worked:

button(type='button', onclick='someFunction("'+ yourObject.id +'")' ) PressMe

Darra

only this solution worked with me – Klaraklarika

Answer 3

You just need to put onclick="myfunction(#{varible.atributo})"

Here a example:

table
thead
    tr
        th #ID
        th Description
        th Actions
tbody
    each item, i in itemlist
        tr
            th(scope='row') #{item.id}
            td #{item.description}
            td
                button(onclick="editItem(#{item.id})", title="Edit")
                    |  Edit

Monahan

Answer 4

Use differing nested quotation marks so that you pass a string to your gotoBlog function. Here, I use single ticks within double ticks.

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

In other words:

button( onclick= "myFunction('#{stringVariable}')" )

Omland

Answer 5

Too late, I know :(

But, this could be useful!

`${}`

So the code will be

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

Corkage

Answer 6

Too late but most of the options above didn't work for me but this did

button(onclick='gotoBlog('+'"'+val.link+'"'+')')

or simpler:

onclick=`gotoBlog('${val.link}')`

Basically converts val.link to a string.

Eliezer

I also found the answers above did not work for me, yours did, thanks – Vite

This is the one... – Unsecured

Answer 7

I came across a similar issues and solved it rather differently (by escaping params). In my case, I needed to pass the following template values to a javascript function as argument when a button is clicked

{
  url:"http://google.com",
  token: "Bearer your-token", 
  accountId: "abc123"
}

So the pug in my case looked as follow

button(onclick='authenticate(\'' + url + '\',\'' + token + '\',\'' + accountId + '\')') Login

And the resulting html is as follow

<button onclick="authenticate('http://google.com','Bearer your-token','abc123')">Login</button>

Jargonize

Answer 8

When using multiple parameters in a function, this did the trick:

'myFunction(' + '"' + varA + '"' + ',' + '"' + varB + '"' + ')'

NOTE: outer/inner/all quote marks can be ' (single) or " (double) quote marks, I used single and double quote marks for readability.

Bathroom

Answer 9

button(type='button', onClick='function(\'' + someValue + '\')') Text

This worked for me to use values that I passed to pug inside an onClick function.

Jetty