JavaScript：Uncaught SyntaxError：missing）引数リストの後

Question

次の関数で文字列を引数として渡そうとすると、Uncaught SyntaxError: missing) after argument listエラーが発生します。しかし、整数を渡すときにうまく動作します。文字列を引数として渡す必要があり、整数ではないので、私は混乱しています。

HTML：

r.title = "The large item" 
counter = <integer> 

<% @items.each do |r| %> 
    <p>Title: <%= r.title %></p> 
    <p>Price: <%= r.price %></p> 
    <p>Description: <%= r.description %></p> 
    <p style="color:blue;" class="room_<%= counter %>" onclick='addItemToCart(<%= r.title %>, <%= counter %>)'>Select Item</p> 
    <br> 
    <br> 
<% end %> 

私はr.titleの代わりにr.idを渡し、コードが動作します。

はJavaScript：

<script text/javascript> 
    function addItemToCart(title, item_number){ 
    $("#" + item_number).append("<br>"+title); 
    } 
</script> 

Answer 1

私はあなたが文字列の前後に引用符が欠落していると思います。このお試しください：問題を理解することが

<p style="color:blue;" class="room_<%= counter %>" 
    onclick='addItemToCart("<%= r.title %>", <%= counter %>)'>Select Item</p> 

EDIT

を、それが出力したHTMLを見てみてください。

<p style="color:blue;" class="room_123" 
    onclick='addItemToCart(The large item, 123)'>Select Item</p> 

このような見出しは、その出力から明らかです。

Answer 2

私は@smarxに同意しますが、これはHTML、Javascript、Rubyのスニペットを組み合わせた典型的なサンプルだと思いますが、これは必ず避けるべきです。

もっと良い方法は、少なくともJavascriptからRubyスニペットを分離することです。

ERB

<p style="color:blue;" class="room_<%= counter %>" 
    data-title="<%= r.title %>" 
    data-counter="<%= counter %>" 
    onclick='addItemToCart(this)'>Select Item</p> 

Javascriptを

function addItemToCart(element) { 
    var title = element.dataset.title; 
    var counter = element.dataset.counter; 
    // ... 
} 

あなたは、私がHTMLに2つのdata-*の属性を追加したことがわかり、とJavascriptでそれらを読むことができます。これは少し冗長だが、スパゲッティは少なく、サーバー（Ruby）上で実行されているコードとブラウザ（Javascript）上で実行されているコードを明確に区別している。

P.S. jQueryを使用している場合は、には、グローバル関数を定義する必要があるので、onclick属性を使用することを強くお勧めします。代わりに$(...).click(fn)または$(...).on('click', fn)を使用してください。匿名の非グローバル機能が許可されているためです。