Javascript 处理在模板文本中调用的表单

我有一个使用json文件生成html表的程序。我想制作一个表格，以便能够选择我要添加到我的购物车中的每个项目的数量。该表是使用模板文本调用的，但我觉得表单没有注册这些文本。每当我运行表单时，它都会给我以下错误：UncaughtTypeError：无法将属性“onsubmit”设置为null，因此我感觉表单没有在html文档中注册

我已经尝试在window.onload中包装我的函数，但它仍然不起作用

这是我的javascript文件：

//load JSON file
var articles = ""
var txt = ""
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    articles = xmlhttp.responseText;
    processArticles(articles);
  }
};
xmlhttp.open("GET","../articles.json",true);
xmlhttp.send();

function processArticles(articles) {
  txt = JSON.parse(articles);

  var tableStart = `
    <h2>Liste des articles</h2>
    <form id="formtable">
    <table>
      <tr>
        <th>ID</th>
        <th>Article</th>
        <th>Prix</th>
        <th>Prix-Retour</th>
        <th>Quantitée maximale</th>
        <th>Projet</th>
        <th>Quantitée</th>
      </tr>`;

  var tableEnd = `
    </table>
    <input type="submit">
    </form>`;

  function articlesTemplate(txt) {
    return `
        <tr>
          <td>${txt.ID}</td>
          <td>${txt.Article }</td>
          <td>${txt.Prix}</td>
          <td>${txt.PrixRetour}</td>
          <td>${txt.QuantiteeMaximale}</td>
          <td>${txt.Projet}</td>
          <td><input type="number" name="quantity" min="1" max="5"></td>
        </tr>
    `;
  }

  let mctxt=txt.filter(value=>
    value.Projet=="mc");
    document.getElementById("tablemc").innerHTML = `
      ${tableStart}
      ${mctxt.map(articlesTemplate).join("")}
      ${tableEnd}
      `;
    ;
}

window.onload=function(){

  var form = document.getElementById('formtable');

  form.onsubmit = function(e) {
    e.preventDefault();
    console.log("HI");
    console.log(form.quantity.value);
    form.reset();
  };
}

//加载JSON文件
var articles=“”
var txt=“”
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.status==200&&xmlhttp.readyState==4）{
articles=xmlhttp.responseText；
加工品（物品）；
}
};
open（“GET”，“./articles.json”，true）；
xmlhttp.send（）；
功能处理文章（文章）{
txt=JSON.parse（文章）；
var tableStart=`
文章列表
身份证件
文章
大奖赛
返程大奖赛
最大量
Projet
定量
`;
var TABLEND=`
`;
函数articlesTemplate（txt）{
返回`
${txt.ID}
${txt.Article}
${txt.Prix}
${txt.PrixRetour}
${txt.quantietemaximale}
${txt.Projet}
`;
}
让mctxt=txt.filter（值=>
项目价值=“mc”）；
document.getElementById（“tablemc”）.innerHTML=`
${tableStart}
${mctxt.map（articlesTemplate.join（“”）}
${tableEnd}
`;
;
}
window.onload=function（）{
var form=document.getElementById（'formtable'）；
form.onsubmit=函数（e）{
e、 预防默认值（）；
控制台日志（“HI”）；
控制台.日志（表格.数量.值）；
form.reset（）；
};
}

我的html文件中有一个div

---

我希望能够看到每个项目被选中的次数，但目前我的表单似乎没有在html文档中注册。

从您的代码中可以看到，窗口在收到请求之前加载，因此尚未创建ID表表单的表

您可能需要仔细阅读，以了解代码不起作用的原因

如果在

窗口.onload中删除了代码，并在调用
processArticles（）
后运行它，那么代码应该可以正常工作

例如：

xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    articles = xmlhttp.responseText;
    processArticles(articles);

    var form = document.getElementById('formtable');

    form.onsubmit = function(e) {
      e.preventDefault();
      console.log("HI");
      console.log(form.quantity.value);
      form.reset();
    };
  }
};

现在删除所有
窗口。onload
code
感谢您的帮助，这对我解决了一个类似的问题！不是我删除了这个，它告诉我：未捕获的TypeError:无法将属性“onsubmit”设置为null，你对我如何解决这个问题有什么想法吗？你是否真的将formtable添加到DOM中了？是否可能id
tablemc
实际上不存在，因此无法将表添加到其中？是的，tablemc确实存在，因为我的表显示得非常完美。我的服务器的链接甚至会像表单通常所做的那样更改表单数量，只是我的javascript代码似乎没有看到我的表单，就像在表单就位之前代码已经运行。你说你删除了代码，但我想你可能误解了我在回答中所说的。我会更新答案，让你明白我的意思