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>

user94559 · Accepted Answer · 2016-07-12 23:21:26Z

3

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.

answered Jul 12, 2016 at 23:21

user94559

60.3k6 gold badges108 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ctpelnar1988 Over a year ago

Awesome, thank you. Do you know why <%= r.title.to_s %> does not work?

user94559 Over a year ago

For the same reason... you need to put quotes around the string.

mu is too short Over a year ago

What happens if r.title contains a double quote?

user94559 Over a year ago

See api.rubyonrails.org/classes/ActionView/Helpers/….

questionto42 · Accepted Answer · 2022-06-07 20:50:33Z

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.

Aetherus · Accepted Answer · 2016-07-13 00:04:31Z

I agree with @smarx, but I think this is a typical sample of mixing HTML, Javascript and Ruby snippet together, which should always be avoided.

The better way is to at least separate Ruby snippet from Javascript.

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;
  // ...
}

You can see that I added two data-* attributes to the HTML, and read them in the Javascript. This seems a little verbose, but it's less spaghetti, and it clearly separates the code running on server (Ruby) from the code running on browsers (Javascript).

P.S. If you're using jQuery, I would strongly recommend NOT to use onclick attribute, because it requires you to define global functions. Use $(...).click(fn) or $(...).on('click', fn) instead, because it allows anonymous non-global functions.

Collectives™ on Stack Overflow

JavaScript: Uncaught SyntaxError: missing ) after argument list

3 Answers 3

4 Comments

1. Replace null values with empty string

2. User rights

3. Check for too many brackets

4. Official guide for the error

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1. Replace null values with empty string

2. User rights

3. Check for too many brackets

4. Official guide for the error

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related