CODEWITHSUNDEEP
javascriptpug
Saras Arya
Saras Arya

Reputation: 3112

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

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

Upvotes: 14

Views: 45489

Answers (9)

Matheus Sant Ana
Matheus Sant Ana

Reputation: 690

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

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

Upvotes: 9

mocha
mocha

Reputation: 65

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.

Upvotes: 2

LSafer
LSafer

Reputation: 354

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

Upvotes: 2

Max Tromp
Max Tromp

Reputation: 780

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

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

Upvotes: 0

kilogic
kilogic

Reputation: 132

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.

Upvotes: 0

Raf
Raf

Reputation: 7649

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>

Upvotes: 0

furt furt
furt furt

Reputation: 291

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

Upvotes: 2

Oscar Luza
Oscar Luza

Reputation: 404

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

Upvotes: 2

perennial_
perennial_

Reputation: 1846

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

Upvotes: 19

Related Questions