javascript - 尝试将输入元素移动到另一个 Div

Question

我正在创建一个一次显示一个问题的表单。不过，我想在单击“查看完整表单”时以不同的 View 显示所有问题。我遇到的问题是以上述形式显示问题。单 View 问题没有问题。

我可以在上述表单上显示该值，但实际上无法输入任何内容。那不是我想要的。

例如。万一有人感到困惑:

(在单一 View 中) 问题1:(输入框)答案1 (全图) 问题1:答案1(全文本，无输入框)

我想做的事: (在单一 View 中) 问题1:(输入框)答案1 (全图) 问题1:(输入框)答案1

就像我说的，我看到如何获取该值(我使用了answer[i-1] = document.getElementById(i-1).value)，然后我打印答案但没有输入框。 我意识到我的错误，所以我尝试了 document.getElementById(x) ，它给了我[object HTMLInputElement]。再说一遍，我只想要输入框，如果答案已填充在单个 View 上，则已填充答案。 在这里进行了一些搜索并尝试使用appendTo、descendants 和appendChild(对象不支持这些)，但没有任何帮助。

html

<div id="questionnaire-question">Click 'Start' to begin...</div>
<div id="input-questionnaire">
  <input type='text' class='form-control' name='reqEng' id='1' style="display:none" placeholder="Requesting Engineer" required>
</div>
<button id="view-form" onclick="viewForm()">View Complete Form</button>
<form id="full-form" style="display:none">
  <div id="full-form-question"></div>
  <input type="reset" name="reset" value="Reset Fields">
  <input type="submit" name="submit" id="submitQuestionnaire" value="Submit Questionnaire">
</form>
</div>

js

function viewForm() {
    for (var x = 0; x < 44; x++) {
        //form.appendChild(document.getElementById(x));         //  Didn't work
        //form.insert(document.getElementById(x).descendants()[x]);     //  Not supported
        //document.getElementById(x).style.display = "block";                   //  Loop for questions and answers to populate
        //document.getElementById(x+1).appendTo(form);
        //fullForm.innerHTML += questions[x]+ ": " + answer[x+1] + " <br>";
        fullForm.innerHTML += questions[x] + ": " + document.getElementById(x + 1) + " <br>";

    }
}

这就是我想要的(来自以前的表单。我将输入填充到数组中，但发现如果我只是对其进行硬编码，那么某些功能会更容易) /image/RlPzA.jpg

这是我目前拥有的:

/image/OKdBc.jpg

Answer 1

您的问题可能需要一些澄清，但我正在尝试解决这个问题，希望我们能让您走上正轨。

下面是一个简单地将输入从一个 div 移动到另一个 div 的示例:

function viewForm(){
//gets all of the inputs held in the "input-questionnaire" div
var inputs = document.getElementById('input-questionnaire').getElementsByTagName('input');

//loop through the collection of inputs
for(var i = 0;i < inputs.length; i++)
{
  //if you want to ensure input is no longer hidden when moved
  //inputs[i].style.display = "block";

  //move the element to the new div
  document.getElementById("full-form-question").appendChild(inputs[i]);
}
//probably want to show the hidden form at this point
document.getElementById("full-form").style.display = "block";
}

如果您确实想将输入“复制”到新的 div，这里是另一个选项:

function viewForm(){
//gets all of the inputs held in the "input-questionnaire" div
var inputs = document.getElementById('input-questionnaire').getElementsByTagName('input');

//loop through the collection of inputs
for(var i = 0;i < inputs.length; i++)
{ 
  //clone the current input
  var clone = inputs[i].cloneNode();

  //make sure the question is visible?
  clone.style.display = "block";

  //append the clone to your "full-form-question" div
  document.getElementById("full-form-question").appendChild(clone);  
}
//probably want to show the hidden form at this point
document.getElementById("full-form").style.display = "block";
}

希望这有帮助。干杯!