So I have the below code in the header of a webpage:

<script type="text/javascript">
var counter = 2;
function addNewItemField(divName) {
  var newDiv = document.createElement("div");
  newDiv.id = "item_listing_" + counter;
  newDiv.innerHTML  = "<label for=\"item_" + counter + "\">Item: </label><br />";
  newDiv.innerHTML += "<input type=\"text\" id=\"item_" + counter + "_category\" list=\"list_categories\" name=\"items[]\">";
  newDiv.innerHTML += "<input type=\"number\" id=\"item_" + counter + "_amount\" mine=\"0.00\" step=\"0.01\" value=\"0.00\" name=\"amounts[]\"><br />";
  document.getElementById(divName).appendChild(newDiv);
  counter++;
}
</script>

I try calling it using a button, however I always get a syntax error stating "expected expression, got end of script."

I've ran it through Linter and it found no errors, I've reviewed it a hundred times and I cannot find where the fault is. I hate to just post code and ask "Why doesn't this work?" but I don't have any idea what's going on so I'm at a loss on even how to ask a proper question for it.

UPDATE

Here is the associated piece of HTML furhter down the page where the function call is made and the peices being manipulated reside:

<div id="item_listings">
  <div id="item_listing_1">
    <label for="item_1">Item: </label><br />
      <input type="text" id="item_1_category" list="list_categories" name="items[]">
      <input type="number" id="item_1_amount" min="0.00" step="0.01" value="0.00" name="amounts[]"><br />

  </div>
</div>
<br />
<input id= "add_new_item" type="button" onClick="javascript:addNewItemField("item_listings")" value="Add Another Item">')

So I have the below code in the header of a webpage:

<script type="text/javascript">
var counter = 2;
function addNewItemField(divName) {
  var newDiv = document.createElement("div");
  newDiv.id = "item_listing_" + counter;
  newDiv.innerHTML  = "<label for=\"item_" + counter + "\">Item: </label><br />";
  newDiv.innerHTML += "<input type=\"text\" id=\"item_" + counter + "_category\" list=\"list_categories\" name=\"items[]\">";
  newDiv.innerHTML += "<input type=\"number\" id=\"item_" + counter + "_amount\" mine=\"0.00\" step=\"0.01\" value=\"0.00\" name=\"amounts[]\"><br />";
  document.getElementById(divName).appendChild(newDiv);
  counter++;
}
</script>

I try calling it using a button, however I always get a syntax error stating "expected expression, got end of script."

I've ran it through Linter and it found no errors, I've reviewed it a hundred times and I cannot find where the fault is. I hate to just post code and ask "Why doesn't this work?" but I don't have any idea what's going on so I'm at a loss on even how to ask a proper question for it.

UPDATE

Here is the associated piece of HTML furhter down the page where the function call is made and the peices being manipulated reside:

<div id="item_listings">
  <div id="item_listing_1">
    <label for="item_1">Item: </label><br />
      <input type="text" id="item_1_category" list="list_categories" name="items[]">
      <input type="number" id="item_1_amount" min="0.00" step="0.01" value="0.00" name="amounts[]"><br />

  </div>
</div>
<br />
<input id= "add_new_item" type="button" onClick="javascript:addNewItemField("item_listings")" value="Add Another Item">')

• javascript

• 3 This is a great example why single quotes are often recommended for javascript strings: No backslashes necessary.. much easier to read! – Damon Commented Mar 17, 2015 at 4:01
• 1 There is no problem with what you've posted – user229044 ♦ Commented Mar 17, 2015 at 4:03
• 1 The code that you've posted above appears to work on its own, which indicates that there must be something else causing the error. you mentioned that it's through node and res.write calls - can you post those? i'm assuming that you probably have a few other calls that write out javascript as well. maybe one of them is causing the error, or they are being appended in such a way that the browser is assuming a semicolon somewhere it shouldn't be. – Akshay Dhalwala Commented Mar 17, 2015 at 4:07
• 1 I have written same code and its working jsbin.com/hibahakeyu/1 Its working even u put above script on head tag too.. can u add the button or code that u call this function >? – Anant Dabhi Commented Mar 17, 2015 at 4:10
• 1 @FatalKeystroke The issue is where you call the function. The syntax highlighting should help there. – Daedalus Commented Mar 17, 2015 at 4:13

1 Answer 1

onClick="javascript:addNewItemField("item_listings")" is full of errors.

You cannot mix-and-match double quotes that way. You need to use single quotes inside the double quotes or you're just stopping your HTML element's attribute early.

Right now, this parses as

<input id= "add_new_item" type="button" onClick="javascript:addNewItemField("

... followed by a bunch of garbage.

You need to use single quotes:

<input id= "add_new_item" type="button" onClick="javascript:addNewItemField('item_listings')" value="Add Another Item">