时间戳

首页 > 解决方案 > 来自生成的 JavaScript 元素的未捕获的 TypeError

javascript - 来自生成的 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 作为我的调试器。

标签： javascripthtmlruntime-error

解决方案

提示错误。评论

var form1 = document.createElement("FROM");

应该：

var form1 = document.createElement("FORM");

推荐阅读