Question

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

这是我在文档的head部分中使用的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。

第一个问题出现在名称中，所以我改变了

element.setAttribute（“name”，time []）到element.setAttribute（“name”，timer []）
其次，类型中存在逻辑错误，因此我更改了

element.setAttribute（“type”，input）to element.setAttribute（“type”，text）; 感谢你的帮助。我喜欢这个伟大的社区。继续摇摆。问候。

Answer 3

问题出现是因为addField() SyntaxError因time[]发生意外令牌]而未加载{{1}}。

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

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

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

3 个答案: