虽然循环不能在JavaScript代码中工作?

时间:2013-04-09 14:03:14

标签: javascript html

在这段代码中,我试图根据select字段的输入生成动态文本字段,该字段由addInput(divname)函数使用on change事件处理,但addInput函数内的while循环不起作用,当我删除while循环时它的工作。我必须生成选定的否。文本字段...以及当我选择不同的数字时文本字段应该改变...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <form action="adduniv.php" method="post">
            University Name: <input type="text" name="college">
            No. of branches:
            <div id="dynamicInput">
                 <select name="branches" id="branches" onchange="if (this.selectedIndex) addInput('dynamicInput');;" ">
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                     <option value="6">6</option>
                     <option value="7">7</option>
                     <option value="8">8</option>
                </select>
            </div>   
            <script>
                var counter = 0;
                var limit = 3;  
                function addInput(divName)
                {       
                    var k=parseInt(document.getElementById("branches"));
                    var newdiv;
                    while(k>0) 
                    {
                        newdiv = document.createElement('div');
                        newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
                        document.getElementById(divName).appendChild(newdiv);
                        counter++;
                        k--;
                     }
                 }
             </script>
             <input type="submit" value="submit" />
         </form>
    </body>
</html>

6 个答案:

答案 0 :(得分:1)

var k=parseInt(document.getElementById("branches"))

你不能解析一个DOM元素。

怀疑你的意思

var k=parseInt(document.getElementById("branches").value,10)

感谢Shikiryu的评论:明确指定基数。

答案 1 :(得分:0)

更改行

var k=parseInt(document.getElementById("branches"));

var k=parseInt(document.getElementById("branches").value);

答案 2 :(得分:0)

document.getElementById("branches")返回一个DOM-Node,但您需要做的是获取此DOM-Node的值。因此,请尝试以下操作生成k

var k=parseInt(document.getElementById("branches").value);

答案 3 :(得分:0)

parseInt(document.getElementById("branches"));
据我所知,

将导致NaN。您试图将整个DOM节点解析为整数,您期望什么?您可能希望从中获取value property

parseInt(document.getElementById("branches").value, 10);

答案 4 :(得分:0)

我想你忘记将.value添加到document.getElementById(“branches”)

答案 5 :(得分:0)

好的,我知道问题已经解决了,但我会尝试这样做:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">    
    <title>Creating input fields</title>
    <script>
      function addInput(nr_branches) {
        var nCounter = 0;        
        //-- Cleaning all elements
        var divB = document.getElementById('divBranches');
        if(divB.hasChildNodes()) {
          while(divB.childNodes.length >= 1) {
            divB.removeChild(divB.firstChild);
          }
        }                
        while(nCounter < nr_branches) {          
          //-- Create a input field
          var input = document.createElement("input");
          input.type = 'text';
          input.name = 'branche_nr_' + nCounter;
          input.placeholder = 'Branche Nr.' + nCounter;
          //document.getElementById("divBranches").innerHTML = "<input type='text' name='branche_nr_'"+ nCounter +" placeholder='Branche Nr."+ nCounter +"' />";
          document.getElementById('divBranches').appendChild(input);        
          nCounter++;          
        }                 
      }    
    </script>
  </head>  
  <body>
    <form name="frm" action="adduniv.php" method="post">
      <input type="text" name="college" placeholder="University Name" />
      <select name="branches" id="branches" onchange="addInput(this.value)">
        <option value="0">-select your branche-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
      </select>
      <div id="divBranches"></div>
      <input type="submit" value="submit" />      
    </form>
  </body>
</html>