Передача значений на кнопку мопса

Question

Передача значений на кнопку мопса

1

Я пытаюсь передать функцию 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

Я смог заставить его работать только с помощью script. (что может быть хорошо, но я подумал, что, возможно, это не лучший способ подойти к этому?)

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

Я не мог найти script. на https://pugjs.org/language/code.html, поэтому я не уверен, как я должен был поступить об этом. Спасибо!

mso4491 04 фев. 2019, в 21:07

Источник

Теги:

javascript

attributes

onclick

pug

1 ответ

Ещё вопросы

Mohit Bhardwaj · Answer 1 · 2019-02-05T03-17-00.000Z

Прекрасно написать свой код JavaScript/jQuery на стороне .script внутри .script. Предполагается, что код JavaScript, который вы пишете с помощью '-' at the beginning of a line запускается на стороне сервера, когда Jade/Pug компилируется для получения результирующего HTML. Таким образом, вы можете написать здесь код, например, когда вы хотите перебрать массив и т.д., И создать некоторую соответствующую HTML-структуру для каждого элемента в массиве. Обратите внимание, что это делается на стороне сервера, этот код зацикливания нигде не будет найден в HTML файле, который отправляется в браузер.

Но код script предназначен для того, чтобы попасть в html файл в браузере и выполняться только там. Таким образом, очень хорошо поместить его в .script который просто помещает содержащийся код, как он есть внутри тегов <script></script> в результирующем html файле.