html - Stimulus JS 脚本计算总数

Question

因此，在黑色方块中，我得到“Precio”（价格）*“Orden”（数量）的总和，然后我想得到红色方块所在的黑色方块中所有内容的总和，即“Total” '

• 这是我当前的脚本：

    <script>
  (() => {
    const application = Stimulus.Application.start()
  
    const calculationController = class extends Stimulus.Controller {
      static targets = [ "precio", "cantidad", "output" ]
  
      calculate() {
        this.outputTarget.textContent = this.precioTarget.innerHTML * this.cantidadTarget.value
      }  
    }
  
    application.register("calculation", calculationController)
  })()
  

  (() => { 常量应用程序 = Stimulus.Application.start()

    const totalController = class extends Stimulus.Controller {
      static targets = [ "valor", "total" ]
  
      total() {
        this.totalTarget.textContent = this.valorTarget.value += this.totalTarget.value
      }
    }
  
    application.register("total", totalController)
  })()
  

• 这就是我的 _form.html.erb 中的内容，只是我使用任何 Stimulus 明智的部分

    <% @client.catalog.products.each do |product| %>
    <tr data-controller="calculation">
      <td><%= product.nombre %></td>
      <td data-target="calculation.precio"><%= product.precio %></td>
      <td><input data-action="change->calculation#calculate" data-target="calculation.cantidad" type="number" class="orden-field"></td>
      <td><span data-action="change->total#total" data-target="total.valor calculation.output">
      </span></td>
    </tr>
    <% end %>
  
    <tr>
      <td></td>
      <td></td>
      <td>IVA:</td>
      <td><span data-target="calculation.output"></span></td>
    </tr>
  
    <tr>
      <td></td>
      <td></td>
      <td><%= form.label :total, "Total:", class: "orden-field" %></td>
      <td><!--<%= form.text_field :total, class: "orden-field" 
      %>--><span data-target="total.total"></span></td>
    </tr>
  </tbody>
  

• 关于如何成功地从 3 个元素中获得总和的任何建议？