innerHTML 未从事件处理程序应用

Question

我有一个非常简单的 html，带有一个用于信息消息的 div 和一个带有两个按钮的表单（实际上是提交和重置两种输入类型）

div#info 是动态填充的 (ajax)。在 JavaScritpt 中，我等待 window 加载并为 onreset 事件注册重置输入：

window.addEventListener("load", onloadWindow);

function onloadWindow() { 
  // Document loaded, register onreset event for my form
  document.getElementById("formId").addEventListener("onreset", onresetForm);
}

// Reset al the infos
function onresetForm(event) {
  document.getElementById("formId").reset();
  document.getElementById("info").innerHTML = '';
}

<body>
  <div id="info"></div> 
  <form id='formId' action='#' method='post'>
    <label for='cod'>Code:</label>
    <input id='cod'  type='text'   name='cod'><br>
    <label for='desc'>Description:</label>
    <input id='desc' type='text'   name='desc'><br>
    <label for='type'>Type:</label>
    <input id='type' type='text'   name='type'><br>
    <input id='upd'  type='submit' name='upd' value='Update'>
    <input id='res'  type='reset'  name='res' value='Reset'>
  </form>
</body>

表单中的所有文本字段都被清除，但是 div#info 的 innerHTML = '' 不起作用，之前由 ajax 生成的消息没有被删除。我在这里错过了什么吗？

顺便说一下，我使用的是 Smarty 表单模板，但我认为这与我的问题无关

Answer 1

事件 type/name 只是 reset，而不是 onreset。然后在你的重置回调中，你不需要再次重置表单。

window.addEventListener("load", onloadWindow);

function onloadWindow() { 
  // Document loaded, register onreset event for my form
  document.getElementById("formId").addEventListener("reset", onresetForm);
}

// Reset al the infos
function onresetForm(event) {
  document.getElementById("info").innerHTML = 'form has been reset';
}

<body>
  <div id="info">Info before reset</div> 
  <form id='formId' action='#' method='post'>
    <label for='cod'>Code:</label>
    <input id='cod'  type='text'   name='cod'><br>
    <label for='desc'>Description:</label>
    <input id='desc' type='text'   name='desc'><br>
    <label for='type'>Type:</label>
    <input id='type' type='text'   name='type'><br>
    <input id='upd'  type='submit' name='upd' value='Update'>
    <input id='res'  type='reset'  name='res' value='Reset'>
  </form>
</body>

innerHTML 未从事件处理程序应用

innerHTML not applying from event handler

javascript

innerhtml