Question

我目前正在尝试制作一个供人们输入信息的表格，然后该信息随后将在段落标签内的新div中显示。

<form id="form" onsubmit="return false;">
                    <input   type="text" id="userInput">
           <input    type="submit" onclick="addParagraphs()"> <!-- button -->
                            </form>

我目前试图使其工作的方式是通过一个函数来查看填写哪些信息，这是通过以下方式完成的：

function othername() {
    var input = document.getElementById("userInput").value;
}.

通过这种方式，我可以“保存”信息，但是稍后要在段落中显示它时，就会出现我的问题。我无法为自己的一生而想办法找出该存储的信息。我尝试过的方法如下：

function addParagraphs()
     {
         var para = document.createElement("p");
         var node = document.createTextNode(othername());
         para.appendChild(node);
         var element = document.getElementById("sizeValgt");
         element.appendChild(para);
      }

“ sizeValgt”是新div的ID，在填写信息时将在其中创建段落标签。

这可能有点令人困惑，但是我希望有些人能够理解我在这里想要做什么。

Answer 1

您的代码中有一些错误

首先：您没有从othername函数返回值
第二：您没有在p标签中添加此值

function othername() {
    var input = document.getElementById("userInput").value;
    return input;
}

function addParagraphs(){
  var para=document.getElementById("test");
  if(para==null){
     para = document.createElement("p");
     para.id="test";
  }
  para.innerText=othername();
  var element = document.getElementById("sizeValgt");
  element.appendChild(para);
}

<form id="form" onsubmit="return false;">
                    <input   type="text" id="userInput">
           <input    type="submit" onclick="addParagraphs()"> <!-- button -->
                            </form>
                            <div id="sizeValgt"></div>

Answer 2

您可以简单地在jquery中做到这一点。示例：

HTML

  <input type="text" id="uinput"/>
  <input type="submit" id="usubmit"/>
  <p id="dis"></p>

jQuery

  $(document).ready(function(){
  $('#usubmit').click(function(){
  var utext= $('#uinput').val();
  $('#dis').html(utext);
  });
  });

如何使用已创建函数的信息来添加新的<p>标记

2 个答案: