Question

我有以下与Google Maps API结合使用的JavaScript变量。

出于某种原因，我收到了错误

＆＃34;未捕获的SyntaxError：意外的标识符＆＃34;

我认为它与以下代码片段中的第4行有关。我不认为这似乎与下面有一个共同的语法问题？

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>';

Answer 1

为避免任何问题，您可以使用模板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>`;

Answer 2

'中的document.getElementById('userInput').value = ''引文未被转义。

将其更改为document.getElementById(\'userInput\').value = \'\'，然后就可以了

Answer 3

您的字符串由单引号编写。因此，如果您再次想要在字符串中使用单引号，则需要使用\来转义它们。您还可以使用双引号''替换字符串""。

第4行怎么样，你不需要只是把变量放在一起，而是将它连接成其余的字符串行。

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

如果 userinput 只是元素的id，而不是变量，则需要将其转义。

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

JavaScript变量语法：意外的标识符

3 个答案: