无法动态生成文本字段Javascript onChange

Question

我无法动态生成文本字段。我在表单中有一个选择框，我想做的是根据下拉列表中的数字选择创建文本字段。因此，如果用户选择一个，我想在它下面创建一个文本字段。我正在使用 javascript 和 onChange 事件来完成它。但是代码在任何浏览器中都不起作用。

这是我在文档头部使用的 javascript 函数：

function addField() 
 {
 alert("Hello");
 var num=document.forms["myForm"]["timePerDay"].value;
   for(var i=0;i<num;i++)
    {
    var element = document.createElement("input");


    element.setAttribute("type", input);
    element.setAttribute("name", time[] );

    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);
    }
    }

而选择字段是：

 <select name="timePerDay" onChange="javascript:addField();"> 
<option selected="selected">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<span id="fooBar">
</span>

似乎 onChange 在任何浏览器中都没有触发，因为我试图将警报消息放入 JS 函数中，甚至它也不起作用。所以你能告诉我是什么问题吗？ 您可以在以下位置查看页面：http://motushealth.com/form1.html

PS： 我在表单上使用另一个 JS 函数来验证它，它适用于 Onsubmit 。它运行良好。

Answer 1

这里的问题是语法错误：element.setAttribute("name", time[] );time[]在php中有效，在js中无效。

编辑：

另一种方法是不使用内联 js (...onClick='javascript:addField();'...)。而是在window.onload 或更好的onDomReady 事件上执行以下操作。

JS：

window.onload = function() {  /* or window.addEventListener */
    document.getElementById('timePerDay').onchange = addField;  /* or addEventListener */
};

标记可以是：

<select id="timePerDay" name="timePerDay"> 
    <option selected="selected">Select One</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Answer 2

在摆弄代码两个多小时后，我终于找到了问题所在。令我惊讶的是，问题出在 JS 自身的代码中。似乎如果 JS 代码有任何问题，整个函数都不起作用，甚至没有调用 onChange。

1. 第一个问题出在名字上，所以我改了

   element.setAttribute("name", time[]) 到 element.setAttribute("name", timer[])

2. 其次是类型有逻辑错误所以我改了

   element.setAttribute("type", input) 到 element.setAttribute("type", text); 感谢你的帮助。我爱这个伟大的社区。继续摇摆。 问候。

Answer 3

出现问题是因为函数 addField() 根本没有加载，因为 SyntaxError 发生在 time[] 具有意外令牌 ]。

调试此类问题的一个提示是始终从查看 Web Inspector（如果您使用的是 Chrome/Safari）或 Firebug 中的控制台日志开始（如果您使用的是 Firefox）。

您可能还想考虑将 jQuery 用于这些类型的任务。具体来说，考虑使用on() 或change()。