jquery - JavaScript: Uncaught SyntaxError: missing ) after argument list - Stack Overflow

admin管理员组

文章数量:1391947

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>

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>

• javascript
• jquery
• ruby

Share Improve this question Follow asked Jul 12, 2016 at 23:18 Ctpelnar1988Ctpelnar1988 1,25533 gold badges1717 silver badges3838 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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.

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 remend 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.

本文标签： jqueryJavaScript Uncaught SyntaxError missing ) after argument listStack Overflow