在使用Javascript按钮的动态创建的新div中添加按钮

时间:2016-06-02 15:53:36

标签: javascript html

我正在构建一种形式。

尝试将按钮插入使用javascript动态创建的新div中。显然,代码不起作用,因为创建的新div是创建它的函数内的局部变量。

没有附加按钮,代码工作正常。 这个想法是附加按钮添加了Form的原始输入类型的额外输入。

有关如何实现这一目标的任何建议?

HTML:

<div id="dynamicInputs">
</div>
Título de la pregunta: <input name="qName" type="text"><br>
Tipo: <select name="inputSelect">
  <option value="text">Respuesta corta</option>
  <option value="radio">Selección múltiple</option>
  <option value="checkbox">Checkboxes</option>
  <option value="textarea">Desarrollo</option>
</select><br>
<input type="button" class="btn btn-default btn-sm" value="Agregar pregunta" onclick="addAllInputs('dynamicInputs', document.myForm.qName.value, document.myForm.inputSelect.value)">

使用Javascript:

    //agegar pregunta en formulario
var counterDynInput = 0;

function addAllInputs(divName, qName, inputType){
     var newDiv = document.createElement('div');
     var newDivName = "";

     newDivName = "divInputs_" + (counterDynInput + 1);
     newDiv.setAttribute("id", newDivName);
     newDiv.innerHTML = 
     (counterDynInput + 1) 
     + ". " 
     + inputLabel(qName) 
     + "<br>" 
     + inputFields(inputType)
     + "<hr>";

     addButtonToDiv(newDivName);
     counterDynInput++;
     document.getElementById(divName).appendChild(newDiv);
}

function inputLabel(qName){
     var putStr = "";
     putStr = "<input type='text' name='qLabel' value='" + qName + "' placeholder='Título de la pregunta...'>";
     return putStr;
}

function inputFields(inputType){
     var putStr = "";
     putStr = "<input type='" + inputType + "' name='myInputs[]'><br>";
     return putStr;
}

function addButtonToDiv(newDivName){
     var btn = document.createElement('BUTTON');
     var div = document.getElementById(newDivName);
     div.appendChild(btn);
}

0 个答案:

没有答案