JavaScript Variable Syntax: Unexpected identifier

Question

I have the following JavaScript variable I am using in conjunction with Google Maps API.

For some reason I am getting the error

"Uncaught SyntaxError: Unexpected identifier"

I believe it has to do with the 4th line in the following code snip. I do not expect this abut it seems like there is a common syntax issue with the below?

var EditForm = '<p><div class="marker-edit">'+
            '<form method="POST" name="SaveMarker" id="SaveMarker">'+
            '<label for="pType"><span>Product:</span>'+'<input type="text" id="userInput" onkeyup="iwproductFilter()" placeholder="Search for names..">'+'&nbsp;'+
            '<a onclick="document.getElementById('userInput').value = ''; iwproductFilter();" style="font-size:16px;cursor:pointer;"</a>'+'&#10006'+
            '<ul id="myUL">'+'<li id="1a"><a>Adele</a></li>'+'<li id="1b"><a>Agnes</a></li>'+'<li id="1c"><a>Billy</a></li>'+
            '<li id="1d"><a>Bob</a></li>'+'<li id="1e"><a>Calvin</a></li>'+'<li id="1f"><a>Christina</a></li>'+'<li id="1g"><a>Cindy</a></li>'+'<li id="1h"><a>Doug</a></li></ul>'+
            '<select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>'+
            '<option value="house">House</option></select></label>'+
            '<label for="pUserName"><span>Place Name :</span><input type="text" name="pUserName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
            '<label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>'+
            '</form>'+
            '</div></p><button name="save-marker" class="save-marker">Add Product</button>';

It's your inline JS in the anchor's onclick. You should probably extract that into its own external code. — Andy
– Andy, Commented Mar 16, 2018 at 12:25
Using Javascript to add HTML that contains inline Javascript is kind of icky to start with! But yes, escaping the ' quote marks is your immediate problem. — lonesomeday
– lonesomeday, Commented Mar 16, 2018 at 12:26

user4676340 · Accepted Answer · 2018-03-16 12:26:19Z

3

To avoid any issue, you could use template litterals :

var EditForm = `<p><div class="marker-edit">
            <form method="POST" name="SaveMarker" id="SaveMarker">
            <label for="pType"><span>Product:</span><input type="text" id="userInput" onkeyup="iwproductFilter()" placeholder="Search for names..">&nbsp;
            <a onclick="document.getElementById('${userInput}').value = ''; iwproductFilter();" style="font-size:16px;cursor:pointer;"</a>&#10006
            <ul id="myUL"><li id="1a"><a>Adele</a></li><li id="1b"><a>Agnes</a></li><li id="1c"><a>Billy</a></li>
            <li id="1d"><a>Bob</a></li><li id="1e"><a>Calvin</a></li><li id="1f"><a>Christina</a></li><li id="1g"><a>Cindy</a></li><li id="1h"><a>Doug</a></li></ul>
            <select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>
            <option value="house">House</option></select></label>
            <label for="pUserName"><span>Place Name :</span><input type="text" name="pUserName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>
            <label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>
            </form>
            </div></p><button name="save-marker" class="save-marker">Add Product</button>`;

answered Mar 16, 2018 at 12:26

user4676340

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

1 Comment

NickvR Over a year ago

This is a more elegant solution than escaping items

Highmastdon · Accepted Answer · 2018-03-16 12:25:26Z

2

Your quotes ' in document.getElementById('userInput').value = '' aren't escaped.

Change it to document.getElementById(\'userInput\').value = \'\' and it'll work

answered Mar 16, 2018 at 12:25

Highmastdon

7,5407 gold badges47 silver badges71 bronze badges

Comments

Suren Srapyan · Accepted Answer · 2018-03-16 12:25:53Z

1

Your string is written by single quotes. So if you again want to use single quotes inside your string, you need to escape them using \. You can also replace the string '' with double quotes "".

What about 4th line, you need not just put the variable but concatenate it as the rest of your string lines.

'<a onclick="document.getElementById(' + userInput + ').value = ""' 
^                                    ^               ^            ^
open    separate string part       close             open         close

If your userinput is just the id of the element, not a variable you need to escape them.

'<a onclick="document.getElementById(\'userInput\').value = \'\''

answered Mar 16, 2018 at 12:25

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Collectives™ on Stack Overflow

JavaScript Variable Syntax: Unexpected identifier

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related