JavaScript: Uncaught SyntaxError: missing ) after argument list

Question

When I try to pass a string as an argument in the following function, I get the Uncaught SyntaxError: missing ) after argument list error. It works fine when passing integers though. I am confused because I read a string must be passed as the argument, and not an integer.

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 %>

When I pass r.id in place of r.title, the code works.

JavaScript:

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

Answer 1

I think you're missing quotes around the string. Try this:

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

EDIT

To understand the issue, try looking at the HTML it outputs. I imagine you'll see something like this:

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

Hopefully, the missing quotes are obvious from that output.

Answer 2

With php and js, I had the same error:

Uncaught SyntaxError: missing ) after argument list

1. Replace null values with empty string

In php, I had to add ?? '' after each value of a variable, the first time that variable is used in the code:

var new_value = $("#update").find(  'input[name="'+
                                    x['x_name']+
                                    '_x_value"]').val() ?? '';
if(x['x_value'] ?? '' != new_value) { 
    ...

In javascript, you would replace null with "" like

(value === null) ? "" : value

2. User rights

Also check your user rights if you use a back-end with permissions. My user had only read rights. Screenshots from DBeaver:

That can lead to an empty response from the sql db in my case. Not in your case, but it may help someone else.

3. Check for too many brackets

I also got this error when I had a double closing } bracket where only one was needed.

4. Official guide for the error

If that does not fix it, have a look at the "Learn More" link in the error message: SyntaxError: missing ) after argument list might help.