从生成的 JavaScript 元素中未捕获的 TypeError
我正在从 JSON 生成来自/输入和按钮的动态列表。该按钮会触发一个 JavaScript 函数，该函数读取表单中输入的当前内容。但是，当单击按钮时，我收到以下错误代码Uncaught TypeError: Cannot read property '0' of undefined。这告诉我表单中没有元素，但我不知道为什么。尝试 0-3 只是为了确保。长度也返回未定义。我能够编辑表单的innerHTML。
我试图从中获取值的精简代码。
<!DOCTYPE html>
<html>
<body onload="gen_form()">
<div id="connectResult"></div>
<p id="demo">RESULT HERE</p>
<script>
const connect_result = document.getElementById("connectResult");
function gen_form(){
var div = document.createElement("DIV");
div.setAttribute("id", "div0");
div.innerHTML += "sometxt<br/>";
var form1 = document.createElement("FROM");
form1.setAttribute("id", 'form_sometxt2_0');
var input1 = document.createElement("input");
input1.setAttribute("type",'text');
input1.setAttribute("name",'textbox');
form1.appendChild(input1);
div.appendChild(form1);
var btn4 = document.createElement("BUTTON");
btn4.setAttribute("id", 'WRITE_sometxt2_0');
btn4.innerHTML = 'WRITE';
btn4.setAttribute("onclick", "myFunction(this)");
div.appendChild(btn4);
connect_result.appendChild(div);
}
function myFunction(param) {
var text = document.getElementById("form_sometxt2_0").elements[0].value + "<br>";
document.getElementById("demo").innerHTML = text;
}
</script>
</html>
以下正是我想要的，但它是静态的。以上基于此。
<!DOCTYPE html>
<html>
<body>
<form id="frm1">
<input type="text">
</form>
<button onclick="myFunction()">Try it</button>
<p id="demo">RESULT HERE</p>
<script>
function myFunction() {
var text = document.getElementById("frm1").elements[0].value + "<br>";
document.getElementById("demo").innerHTML = text;
}
</script>
</html>
我的问题是：这两个代码片段之间有什么区别，我该如何修复上述错误？
我不想使用提交输入，因为会有第二个按钮来编辑输入值的内容。
PS：我对 JavaScript 及其术语相当陌生。
使用 Chrome 作为我的调试器。
万千封印1回答
-
桃花长相依
提示错误。评论var form1 = document.createElement("FROM");应该：var form1 = document.createElement("FORM");
随时随地看视频慕课网APP
相关分类
JavaScript