0

まだこのパズルを解こうとしています。ここにもっと完全な例があります。モデルは PanOrder と呼ばれます。

/assets/javascripts/pan_orders.js にあるものは次のとおりです。

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = document.getElementById("price_per_pan");
    individual_price = p.value;
    n = document.getElementById("number_of_pans");
    pans = n.value;
    if (pans > 0)
    {
        document.getElementById.html("pans_total").value = n * p;
    }
}

...そして、これが私の /views/pan_orders/_form.html.erb にあるものです

<%= form_for(@pan_order) do |f| %>
  <% if @pan_order.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@pan_order.errors.count, "error") %> prohibited this pan_order from being saved:</h2>

      <ul>
      <% @pan_order.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <%= f.hidden_field :price_per_pan, :value => 300 %>
    <%= f.hidden_field :extra_shipping, :value => 25 %>
  <div class="field">
    <%= select_tag :number_of_pans, options_for_select(pans_array)%>
  </div>
  <h3>Subtotal: <span id="pans_total"></span></h3>
  <div class="field">
    <%= check_box_tag :expedited_shipping, :checked => false, :onclick => "pans_total_cost()"  %>
    </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

...そして、これが私の /helpers/pan_orders_helper.rb にあるものです

module PanOrdersHelper
    def pans_array
      numbers = []
      zero = ["0", 0]
      one = ["1", 1]
      two = ["2", 2]
      three = ["3", 3]
      four = ["4", 4]
      five = ["5", 5]
      numbers << zero << one << two << three << four << five
    end
  end

しかし、フォームが表示され、ドロップダウン リストから 1 つ以上のパンを選択し、チェックボックスをクリックすると、「小計」の後に何も表示されません。

4

1 に答える 1

1

ID の DOM 要素number_of_pansは選択タグですが、JavaScript では「.value」を使用して選択した値を取得しようとしていますが、これは機能しません。また、HTML を設定するコードも機能し<span id="pans_total">ません。「.html」のタイプミスがあり、DOM 要素の HTML を「.value」で設定することもできません。

ページを動的に操作するには、jQuery またはその他の JavaScript フレームワークを使用することを強くお勧めします。

また、2 つの値を乗算する実際の計算にタイプミスがありました。間違った変数名が使用されました。

// include jQuery in your <head>

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = $("#pan_order_price_per_pan");    // jQuery selector (updated)
    individual_price = p.val(); // this is the jQuery way to get an input's value
    n = $("#number_of_pans");
    pans = n.val(); // this works with select tags too
    if (pans > 0)
    {
        $("#pans_total").html(individual_price * pans); // jQuery way to set the HTML of an element
    }
}

jQuery を使用しないソリューション:

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = document.getElementById("pan_order_price_per_pan"); // <-- updated ID name
    individual_price = p.value;
    n = document.getElementById("number_of_pans");
    pans = n.options[ n.options.selectedIndex ].value; // <-- updated line
    if (pans > 0)
    {
        document.getElementById("pans_total").innerHTML = individual_price * pans;  // <-- updated line, including variable names!
    }
}

さらに、check_box_tagフォーム ヘルパー呼び出しにバグがあります。2 つの必須フィールドが不足しているため、オプションが期待どおりに使用されていません。結果の HTML 出力を表示すると、onchange="pans_total_cost()" 属性がなく、代わりに次のようになります。

false, :onchange=>"pans_total_cost()"}" name="expedited_shipping">

値を設定し、チェックされているかどうかを修正します。

<%= check_box_tag "expedited_shipping", "yes", false, { :onchange => "pans_total_cost()" } %>
于 2012-10-22T22:50:06.417 に答える