javascript - 将值传递给onclick按钮帕格(Passing Values to onclick button Pug)

Question

I am trying to pass a js function to a button using Pug.(我正在尝试使用Pug将js函数传递给按钮。)

I saw this question here, but it does not seem to cover how to format the js function.(我在这里看到了这个问题 ，但似乎并未涵盖如何格式化js函数。)

I could not find documentation explaining how to do this, but perhaps it is on pug.org and I just do not understand it.(我找不到说明如何执行此操作的文档，但是也许它在pug.org上，我只是不理解。)

Any links to documentation/ an explanation would be great.(任何到文档的链接/说明都很好。)

Anyway, I had the following:(无论如何，我有以下几点：)

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

I was only able to get it to work using script.(我只能使用script.来使其工作script.)

(which maybe is fine but I thought perhaps was not the best way to approach this?)(（这也许很好，但我认为也许不是解决此问题的最佳方法？）)

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

I could not find the script.(我找不到script.)

at https://pugjs.org/language/code.html , so I am not sure how I was supposed to go about this.(在https://pugjs.org/language/code.html ，所以我不确定应该怎么做。)   ask by mso4491 translate from so

Answer 1

It is perfectly fine to write your client-side JavaScript/jQuery code inside .script .(将您的客户端JavaScript / jQuery代码.script 。)

The JavaScript code you write using '-' at the beginning of a line is supposed to be run server-side, when the Jade/Pug is being compiled to produce the resulting html.(当编译Jade / Pug以产生最终的html时， '-' at the beginning of a line使用'-' at the beginning of a line编写的JavaScript代码应该在服务器端运行。) So, you can write here code like when you want to loop through an array etc. and create some corresponding html structure for each item in the array.(因此，您可以在此处编写代码，例如当您要遍历数组等时，并为数组中的每个项目创建一些相应的html结构。) Please notice that this is being done on the server side, this looping code won't anywhere be found in the html file that's being sent to browser.(请注意，这是在服务器端完成的，在发送到浏览器的html文件中找不到此循环代码。)

But, the script code is intended to end up in the html file in the browser and to get executed there only.(但是， script代码旨在最终出现在浏览器的html文件中并仅在该文件中执行。)

So, it's perfectly fine to put it inside .script which just places the contained code as it is inside <script></script> tags in the resulting html file.(因此，将其放在.script是完全可以的，该.script只是将包含的代码按原样放置在生成的html文件中的<script></script>标记内。)