使用JavaScript动态地在html中添加文本框（发生语法错误） [英] Dynamically adding text boxes in html using JavaScript (syntax error occurs)
问题描述
<！DOCTYPE html>
< html>
< head>
< script type =text / javascript>
var i = 1;
function addkid（）{
if（i <= 3）{
i ++;
var div = document.createElement（'div'）;
div.innerHTML =Child：< input type =textname =child_1>
< input type =buttonid =add_kid（）onclick =addkid ）value =+/>
< input type =buttonvalue = - onclick =removekid（this）>;
document.getElementById（'kids'）。appendChild（div）;
}
}
函数removekid（div）{
document.getElementById（'kids'.removeChild（div.parentNode）;
i--;
< / script>
< / head>
< body>
< form>
名称： < input type =textname =name>< br />
< div id =kids>
Child：< input type =textname =child_1>
< input type =buttonid =add_kid（）onclick =addkid（）value =+/>（limit 3）
< / div>
电话：< input type =textname =phone>< br />
< input type =submit name =submitvalue =submit/>
< / form>
< / body>
< / html>
这是我的html代码，它具有JavaScript功能当点击+按钮时，动态添加文本框，但是程序不起作用。
（check5 .php？name =& child_1 =& phone =：10未知的语法错误：意外
标识符）在JavaScript函数第1部分。
请帮我解决这个
问题是这个作业中的字符串文字： p>
div.innerHTML =Child：< input type =textname =child_1>
< input type =buttonid =add_kid（）onclick =addkid（）value =+/>
< input type =buttonvalue = - onclick =removekid（this）>;
当您的字符串声明为字符时，您必须使用反斜杠来转义任何字符串本身需要的字符，而且，在字符串文字的中间不能有换行符（除非是带有背面代码而不是引号的ES6字符串）。
所以尝试一下，转义并不回车：
div.innerHTML =Child：< ; input type = \text\name = \child_1\>
+< input type = \button\id = \add_kid（） \\onclick = \addkid（）\value = \+ \/>
+< input type = \button\value = \ \onclick = \removekid（this）\>;
或者你可以使用单引号包围字符串，然后您不必转义双引号：
div.innerHTML ='Child：< input type =textname =child_1>'
+'< ; input type =buttonid =add_kid（）onclick =addkid（）value =+/>'
+'< input type =buttonvalue = - onclick = removekid（这） >';
无论哪种方式，我已经通过连接三个字符串文字来删除字符串中的换行符，以便它仍然可以在您的代码中格式化为三行。你可以改为只做一个长行：
div.innerHTML ='Child：< input type =textname = child_1 > < input type =buttonid =add_kid（）onclick =addkid（）value =+/> < input type =buttonvalue = - onclick =removekid（this）>';
如果您的字符串中需要一个实际的换行符，您可以使用 \\\，像
这个字符串在这里有一个换行符：\\\
Thank你。
更新：您还在此行上孩子们之后缺少）
document.getElementById（'kids'.removeChild（div.parentNode）;
展开以下代码段以查看上述修复的代码，代码正常工作：
div class =snippetdata-lang =jsdata-hide =truedata-console =truedata-babel =false>
var i = 1; function addkid（）{if（i <= 3）{i ++; var div = document .createElement（'div'）; div.innerHTML ='Child：< input type =textname =child_1>'+'< input type =buttonid =add_kid（）onclick = addkid（）值e =+/>'+'< input type =buttonvalue = - onclick =removekid（this）>';的document.getElementById（孩子）的appendChild（DIV）。 }} function removekid（div）{document.getElementById（'kids'）。removeChild（div.parentNode）;我 - ;}
< form>名称：< input type =textname =name> <峰; br /> < div id =kids>子项：< input type =textname =child_1> < input type =buttonid =add_kid（）onclick =addkid（）value =+/>（limit 3）< / div>电话：< input type =textname =phone> <峰; br /> < input type =submitname =submitvalue =submit/>< / form>
p>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var i =1;
function addkid(){
if(i<=3){
i++;
var div=document.createElement('div');
div.innerHTML="Child:<input type="text" name="child_1">
<input type="button" id="add_kid()" onclick="addkid()" value="+" />
<input type="button" value="-" onclick="removekid(this)">";
document.getElementById('kids').appendChild(div);
}
}
function removekid(div){
document.getElementById('kids'.removeChild(div.parentNode);
i--;
}
</script>
</head>
<body>
<form>
Name: <input type="text" name="name"><br/>
<div id="kids">
Child:<input type="text" name="child_1">
<input type="button" id="add_kid()" onclick="addkid()" value="+" />(limit 3)
</div>
Phone: <input type="text" name="phone"><br/>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
This is my html code which has a JavaScript function to add a text box dynamically when the '+' button is clicked, but the program does not work giving an error:
(check5.php?name=&child_1=&phone=:10 Uncaught SyntaxError: Unexpected identifier)` in the JavaScript function part 1.
Please help me to solve this
The problem is with the string literal in this assignment:
div.innerHTML="Child:<input type="text" name="child_1">
<input type="button" id="add_kid()" onclick="addkid()" value="+" />
<input type="button" value="-" onclick="removekid(this)">";
When your string is declared with " characters you have to use backslashes to escape any " characters needed in the string itself. Also, you can't have line breaks in the middle of a string literal (unless it is an ES6 string declared with back-ticks instead of quotation marks).
So try this, with escaping and no carriage returns:
div.innerHTML = "Child:<input type=\"text\" name=\"child_1\">"
+ " <input type=\"button\" id=\"add_kid()\" onclick=\"addkid()\" value=\"+\" />"
+ " <input type=\"button\" value=\"-\" onclick=\"removekid(this)\">";
Or you can surround the string with single quotes and then you don't have to escape double quotes:
div.innerHTML = 'Child:<input type="text" name="child_1">'
+ ' <input type="button" id="add_kid()" onclick="addkid()" value="+" />'
+ ' <input type="button" value="-" onclick="removekid(this)">';
Either way I have removed the line breaks in the string by concatenating three string literals so that it can still be formatted as three lines in your code. You could instead just make it one long line:
div.innerHTML = 'Child:<input type="text" name="child_1"> <input type="button" id="add_kid()" onclick="addkid()" value="+" /> <input type="button" value="-" onclick="removekid(this)">';
If you need an actual newline character in your string you use \n, like "This string has a newline here:\nThank you."
Update: You were also missing a ) after 'kids' on this line:
document.getElementById('kids'.removeChild(div.parentNode);
Expand the following code snippet to see the above things fixed, and the code working:
var i = 1;
function addkid() {
if (i <= 3) {
i++;
var div = document.createElement('div');
div.innerHTML = 'Child:<input type="text" name="child_1">'
+ ' <input type="button" id="add_kid()" onclick="addkid()" value="+" />'
+ ' <input type="button" value="-" onclick="removekid(this)">';
document.getElementById('kids').appendChild(div);
}
}
function removekid(div) {
document.getElementById('kids').removeChild(div.parentNode);
i--;
}
<form>
Name:
<input type="text" name="name">
<br/>
<div id="kids">
Child:
<input type="text" name="child_1">
<input type="button" id="add_kid()" onclick="addkid()" value="+" />(limit 3)
</div>
Phone:
<input type="text" name="phone">
<br/>
<input type="submit" name="submit" value="submit" />
</form>
这篇关于使用JavaScript动态地在html中添加文本框（发生语法错误）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
