entityMap|blocks|key|bd7gh|text|向html元素添加属性时，您已经在pug的作用域中，所以您可以像使用常规js变量一样使用pug变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fl38d|button(type='button'+class='+c-btn-blue+c-btn-circle+c-btn-uppercase'+value="Read+More"+onclick='gotoBlog('+%2B+val.link+%2B+')')|code-block|syntax|javascript|69oov^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

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.

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

entityMap|blocks|key|f3mtj|text|我只使用了下面的代码，它对我很有效(带有pre和pos引号)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|g13|button(type='button',+onclick='someFunction("'%2B+yourObject.id+%2B'")'+)+PressMe|offset|length|style|CODE|9urne^0|0|0|25|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@$E|L|F|M|G|H]]|A|@]|B|$]]|$2|I|4|-4|6|7|8|N|9|@]|A|@]|B|$]]]]

I just used the code below and it worked for me (with pre and pos quotes)

<code>button(type='button', onclick='someFunction("'+ yourObject.id +'")' ) PressMe</code>

entityMap|blocks|key|c5tcd|text|你只需要把onclick="myfunction(#{varible.atributo})“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|br3b2|下面是一个示例：|891vt|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")
++++++++++++++++++++%7C++Edit|code-block|syntax|javascript|fksim^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|M|9|@]|A|@]|B|$H|I]]|$2|J|4|-4|6|7|8|N|9|@]|A|@]|B|$]]]]

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

Here a example:

<pre><code>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
</code></pre>

entityMap|blocks|key|1fair|text|使用不同的嵌套引号，以便将字符串传递给gotoBlog函数。在这里，我在双刻度中使用了单刻度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|d94s8|button(type='button'+class='+c-btn-blue+c-btn-circle+c-btn-uppercase'+value="Read+More"+onclick="gotoBlog(+'#{val.link}'+)")|code-block|syntax|javascript|am32b|换句话说：|esr3a|button(+onclick=+"myFunction('#{stringVariable}')"+)|bsan5^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|N|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|O|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|P|9|@]|A|@]|B|$F|G]]|$2|L|4|-4|6|7|8|Q|9|@]|A|@]|B|$]]]]

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

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

In other words: 

<pre><code>button( onclick= "myFunction('#{stringVariable}')" )
</code></pre>

entityMap|blocks|key|2dlp9|text|太晚了，我知道:(|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6v8r7|但是，这可能是有用的！|celvs|`${}`|code-block|syntax|javascript|fb66u|因此代码将是|ajil4|button(type='button'+class='+c-btn-blue+c-btn-circle+c-btn-uppercase'+value="Read+More"+onclick=`gotoBlog(+${val.link}+)`)|d3353^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|Q|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|R|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|S|9|@]|A|@]|B|$H|I]]|$2|N|4|-4|6|7|8|T|9|@]|A|@]|B|$]]]]

Too late, I know :(
But, this could be useful!
<pre><code>`${}`
</code></pre>
So the code will be
<pre><code>button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value=&quot;Read More&quot; onclick=`gotoBlog( ${val.link} )`)
</code></pre>

entityMap|blocks|key|9dgnk|text|我遇到了类似的问题，并以不同的方式解决了它(通过转义参数)。在我的示例中，当单击按钮时，我需要将以下template+values作为参数传递给javascript函数|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3e1sh|{
++url:"http://google.com",
++token:+"Bearer+your-token",+
++accountId:+"abc123"
}|code-block|syntax|javascript|7eorf|因此，我的示例中的pug如下所示|3logc|button(onclick='authenticate(\''+%2B+url+%2B+'\',\''+%2B+token+%2B+'\',\''+%2B+accountId+%2B+'\')')+Login|1u7ph|生成的html如下所示|drk3h|<button+onclick="authenticate('http://google.com','Bearer+your-token','abc123')">Login</button>|85ndu^0|1E|F|0|0|9|3|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|U|9|@$A|V|B|W|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|X|9|@]|E|@]|F|$J|K]]|$2|L|4|M|6|7|8|Y|9|@$A|Z|B|10|C|D]]|E|@]|F|$]]|$2|N|4|O|6|I|8|11|9|@]|E|@]|F|$J|K]]|$2|P|4|Q|6|7|8|12|9|@]|E|@]|F|$]]|$2|R|4|S|6|I|8|13|9|@]|E|@]|F|$J|K]]|$2|T|4|-4|6|7|8|14|9|@]|E|@]|F|$]]]]

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

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

So the <code>pug</code> in my case looked as follow 

<pre><code>button(onclick='authenticate(\'' + url + '\',\'' + token + '\',\'' + accountId + '\')') Login
</code></pre>

And the resulting html is as follow 

<pre><code>&lt;button onclick="authenticate('http://google.com','Bearer your-token','abc123')"&gt;Login&lt;/button&gt;
</code></pre>

entityMap|blocks|key|4lsl0|text|当在一个函数中使用多个参数时，这样做是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|143ru|'myFunction('+%2B+'"'+%2B+varA+%2B+'"'+%2B+','+%2B+'"'+%2B+varB+%2B+'"'+%2B+')'|offset|length|style|CODE|9522i|注意:外引号/内引号/所有引号都可以是'+(单引号)或"+(双引号)引号，我使用单引号和双引号是为了提高可读性。|1dctk^0|0|0|1R|0|J|1|R|1|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@$E|N|F|O|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|P|9|@$E|Q|F|R|G|H]|$E|S|F|T|G|H]]|A|@]|B|$]]|$2|K|4|-4|6|7|8|U|9|@]|A|@]|B|$]]]]

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

<code>'myFunction(' + '"' + varA + '"' + ',' + '"' + varB + '"' + ')'</code>

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

entityMap|blocks|key|6thvq|text|按钮(type=‘button’，onClick='function(\'‘%2B+someValue+%2B+'\')')文本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8q8eg|这对我在onClick函数中使用传递给pug的值很有效。|2bko8^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|F|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|G|9|@]|A|@]|B|$]]|$2|E|4|-4|6|7|8|H|9|@]|A|@]|B|$]]]]

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

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

entityMap|blocks|key|3eq51|text|太晚了，上面的大多数选择对我来说都不起作用，但这个确实起到了作用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|b2dei|button(onclick='gotoBlog('%2B'"'%2Bval.link%2B'"'%2B')')|code-block|syntax|javascript|cs956|或者更简单：|664ae|onclick=`gotoBlog('${val.link}')`|4jgqp|基本上将val.link转换为字符串。|8qakb^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|P|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|Q|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|R|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|S|9|@]|A|@]|B|$]]|$2|N|4|-4|6|7|8|T|9|@]|A|@]|B|$]]]]

Too late but most of the options above didn't work for me but this did
<pre><code>button(onclick='gotoBlog('+'&quot;'+val.link+'&quot;'+')')
</code></pre>
or simpler:
<pre><code>onclick=`gotoBlog('${val.link}')`
</code></pre>
Basically converts val.link to a string.

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 

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

Error 

<pre><code>1:8 Uncaught SyntaxError: Invalid or unexpected token
</code></pre>

Changing it to <code>!{val.link}</code>

Error 

<pre><code>Uncaught SyntaxError: Unexpected token .
</code></pre>

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

Just giving val.link says <code>Uncaught ReferenceError: val is not defined</code>

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

Thanks

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

 我刚接触jade，并被这个问题卡住了。我想我已经尝试了从StackOverflow帖子开始的所有方法，但仍然一无所获。 我尝试过的东西 button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick='gotoBlog( #{val.link} )') 错误 1:8 U

问如何在(Jade)pug中将值传递给onclick函数？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在(Jade)pug中将值传递给onclick函数？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在(Jade)pug中将值传递给onclick函数？
EN