Javascript 将值传递给onclick按钮Pug

我正在尝试使用Pug将js函数传递给按钮。我在这里看到了，但它似乎没有涵盖如何格式化js函数

我找不到解释如何做到这一点的文档，但可能是在pug.org上，我就是不明白。任何指向文档/解释的链接都很好

无论如何，我有以下几点：

extends layout

block content
 h1=title
  -var itemNumber= 1;
  -function add_fields() {
    -itemNumber++;
    -var objTo = document.getElementById('incomeItems');
    -var divtest = document.createElement("div");
    -divtest.innerHTML = '<div class="label">Item ' + itemNumber +':</div><div class="content"><span>Item Name: <input type="text" style="width:150px;" name="itemName[]" value="" /><small></small></span><span> Income Amount: <input type="number" style="width:60px;" namae="itemAmount[]" value="" /><small></small></span></div>';
    -objTo.appendChild(divtest);
  -}

  form(method='POST' action='')
    div.form-group
      label(for='name') Budget Name:
      input#budget_name.form-control(type='text', placeholder='Such as: New Building Budget' name='name' required='true' value=(undefined===budget ? '' : budget.name) )
    div.form-group#incomeItems
      label(for='income') Income:
      input#income.form-control(type='number', name='income' required='true' value=(undefined===budget ? '' : budget.income) )
  button.btn.btn-primary(type='button' onclick='add_fields()') Add Income Item
    div.form-group
      label(for='expenses') Expenses:
      input#expenses.form-control(type='number', name='expenses' required='true' value=(undefined===budget ? '' : budget.expenses) )
button.btn.btn-primary(type='submit') Submit

if errors 
  ul
    for error in errors
      li!= error.msg

---

我找不到

脚本。

在，所以我不确定该怎么做。

在

脚本中编写客户端JavaScript/jQuery代码非常好。当编译Jade/Pug以生成结果html时，您在一行开头使用
'-'编写的JavaScript代码应该在服务器端运行。因此，您可以在这里编写代码，比如当您想要循环通过一个数组时，等等，并为数组中的每个项目创建一些相应的html结构。请注意，这是在服务器端完成的，在发送到浏览器的html文件中找不到该循环代码

但是，
脚本
代码最终会出现在浏览器的html文件中，并且只在那里执行。因此，将它放在
.script
中是非常好的，它只是将包含的代码按其在结果html文件中的
标记中的方式放置。
在
.script
中编写客户端JavaScript/jQuery代码是非常好的。当编译Jade/Pug以生成结果html时，您在一行开头使用
'-'编写的JavaScript代码应该在服务器端运行。因此，您可以在这里编写代码，比如当您想要循环通过一个数组时，等等，并为数组中的每个项目创建一些相应的html结构。请注意，这是在服务器端完成的，在发送到浏览器的html文件中找不到该循环代码

但是，
脚本
代码最终会出现在浏览器的html文件中，并且只在那里执行。因此，将它放在
.script
中是非常好的，它只是将包含的代码放在结果html文件中的
标记中

extends layout

block content
 h1=title
 script.
      var itemNumber= 1;
      function add_fields() {
          itemNumber++;
          var objTo = document.getElementById('incomeItems');
          var divtest = document.createElement("div");
      divtest.innerHTML = '<div class="label">Item ' + itemNumber +':</div><div class="content"><span>Item Name: <input type="text" style="width:150px;" name="itemName[]" value="" /><small></small></span><span> Income Amount: <input type="number" style="width:60px;" namae="itemAmount[]" value="" /><small></small></span></div>';
      objTo.appendChild(divtest);
  }

  form(method='POST' action='')
    div.form-group
      label(for='name') Budget Name:
      input#budget_name.form-control(type='text', placeholder='Such as: New Building Budget' name='name' required='true' value=(undefined===budget ? '' : budget.name) )
    div.form-group#incomeItems
      label(for='income') Income:
      input#income.form-control(type='number', name='income' required='true' value=(undefined===budget ? '' : budget.income) )
  button.btn.btn-primary(type='button' onclick='add_fields()') Add Income Item
    div.form-group
      label(for='expenses') Expenses:
      input#expenses.form-control(type='number', name='expenses' required='true' value=(undefined===budget ? '' : budget.expenses) )
button.btn.btn-primary(type='submit') Submit

if errors 
  ul
    for error in errors
      li!= error.msg