添加动态输入

Question

嗨，我想动态添加主体，所以每次在plannedvisit类型的数字是添加一个更多的主体，但我得到了一个错误。我使用的是jsf和javaScript下面是我目前所做的:

我通过输入number调用javascript函数:

 <h:inputText type="number" id="plannedVisit" styleClass="form-control"
       onkeyup=" addInput('dynamicInput'); return false; " required="true" >
    </h:inputText>

<div class="form-group"><div class= "col-sm-6" >
    <div id="nextVisitTable" class="input-group table">
        <table id="nextVisitTable1" class="table" style="width:10%;margin-  top:-210px; margin-left:90px; overflow:auto;">
           <thead>
              <tr>
                 <th>Reason</th>
                 <th>Date</th>
                 <th>Time</th>                                          
               </tr>
          </thead>
      <tbody>
      <tr>
      <td><h:inputText type="number" class="reasonOfVisit" styleClass="form- control"
required="true">
        </h:inputText></td>
    <td><h:inputText type="date" class="reasonOfVisit" styleClass="form-control"required="true">
      </h:inputText></td>
   </tr>                                                
   </tbody>
   </table>   
   </div>                                       
</div>

，这是脚本:

function addInput(divName){
           var counter = 1;
           console.log(counter);
           var limit = 3;
                 if(counter == limit){ 
                 alert("You have Reached the Limit");
                 }
                  else {
          var newdiv = document.createElement('tbody');
          newdiv.innerHTML = "<tr><td><h:inputText type="number" class="reasonOfVisit" styleClass="form-control" required="true">
                              </h:inputText></td>
                              <td><h:inputText type="date" class="reasonOfVisit" styleClass="form-control" required="true">
                              </h:inputText></td>
                              </tr>"; 
          counter++;   
     }
                }

，错误为:SyntaxError: missing;在声明中在这一行

newdiv.innerHTML = "<tr><td><h:inputText type="number....</tr>"

我不确定这是正确的方式或不请帮助，如果你有任何想法。由于

Answer 1

试试这个

var counter = 1,
    limit = 3;
function addInput(event)
{
    if(counter == limit){
        alert("You have Reached the Limit");
    }
    else {
        var newdiv = document.createElement('tbody');
        newdiv.innerHTML = '<tr><td><h:inputText type="number" class="reasonOfVisit" styleClass="form-control" required="true">
                      </h:inputText></td>
                      <td><h:inputText type="date" class="reasonOfVisit"   styleClass="form-control" required="true">
                      </h:inputText></td>
                      </tr>'; 
        counter++;
    }
}
window.onload = function() {
    var element = document.getElementById("plannedVisit");
    element.addEventListener("keyup", addInput, false);
};

和你的HTML

<input type="number" id="plannedVisit" styleClass="form-control" >