如何通过添加表单将文本从表单添加到iframe

Question

有一个添加新表单的按钮，以及如何向iframe添加文本

第一种形式将文本添加到场景中。但是，以下通过单击按钮创建的表单不显示文本 如何合并两个代码？文件参考https://jsfiddle.net/Nickpo/q8jc1dgL/10/

$(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".container1");
        var add_button      = $(".add_form_field");

        var x = 1;
        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div><textarea type="text" value="text" name="fname" id="fname" cols="20" rows="3"></textarea></p><input id="text1" type="submit" value="Отправить"></div>'); //add input box
            }
      else
      {
      alert('You Reached the limits')
      }
        });

        $(wrapper).on("click",".delete", function(e){
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
$("#text1").click(function(e) {
  var wrapper = document.getElementById("text-container");
  var position = new THREE.Vector3(wrapper.children.length * -1.1, 0, 0);
  var newText = document.createElement('a-entity')
  newText.setAttribute('position', position)
  newText.setAttribute("text", {
    "color": "white",
    "align": "center",
    "value": document.querySelector('#fname').value
  })
  wrapper.appendChild(newText)
  return false
});

form {
  position: absolute;
  z-index: 1;
  background: white;
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>


<form name="myForm" href="" onsubmit="text1"  height="440">

   <textarea type="text" value="text" name="fname" id="fname" cols="20" rows="3"></textarea></p>
  <input id="text1" type="submit" value="Отправить">
  <div class="container1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-size:4px; font-weight:bold;">+ </span></button>
<div><input type="text" name="mytext[]"></div>

</div>

</form>

 <div class="container1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-size:4px; font-weight:bold;">+ </span></button>
<div><input type="text" name="mytext[]"></div>

</div>

<a-scene background="color: black">
  <a-entity id='text-container' position="0 1.6 -0.5">
    <a-entity id="output" text="value: output; align: center;" position="0 0 0"></a-entity>
  </a-entity>
</a-scene>

Answer 1

首先，如果页面上有多个文本区域和按钮，则不能使用相同的ID（#text和#fname）来引用它们。您要么给他们唯一的ID，要么使用类名。另外，您还必须监听相应按钮上的点击事件，而不仅仅是第一个。

最简单的设置方法是在同一函数中创建HTML文本区域和A-Frame文本输出：

function createTextArea(wrapper) {
  const newTextArea = $(`
    <div>
      <textarea type="text" value="text" name="fname" class="inputText" cols="20" rows="3"></textarea>
      <input class="sendButton" type="submit" value="Отправить" />
    </div>
  `);
  wrapper.append(newTextArea);
  const inputText = newTextArea.find(".inputText");
  const sendButton = newTextArea.find(".sendButton");

  var aframeWrapper = document.getElementById("text-container");
  const index = aframeWrapper.children.length;
  var position = new THREE.Vector3(index * -1.1, 0, 0);
  var newText = document.createElement("a-entity");
  newText.setAttribute("position", position);
  newText.setAttribute("text", {
    color: "white",
    align: "center",
    value: `output${index}`
  });
  aframeWrapper.appendChild(newText);

  sendButton.click(e => {
    e.preventDefault();
    newText.setAttribute("text", "value", inputText.val());
  });
}

$(document).ready(function() {
  var wrapper = $(".container1");
  var max_fields = 10;
  var add_button = $(".add_form_field");

  // create initial text area
  createTextArea(wrapper);

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      createTextArea(wrapper);
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

form {
  position: absolute;
  z-index: 1;
  background: white;
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>


<div class="container1">
  <form name="myForm" href="" onsubmit="text1" height="440">
    <div class="container1">
      <button class="add_form_field">Add New Field &nbsp; 
      <span style="font-size:4px; font-weight:bold;">+</span></button>
      <div><input type="text" name="mytext[]" /></div>
    </div>
  </form>
</div>


<a-scene background="color: black">
  <a-entity id='text-container' position="0 1.6 -0.5"></a-entity>
  <a-camera position="0 1.6 1"></a-camera>
</a-scene>