在列表中显示表单输入数据

Question

为了让我的代码正常工作，我尝试了多种方法，但都失败了。我想让表单的输入文本在提交后显示在列表（id="contact"）中，就像在联系人列表中添加新联系人一样。这是我的代码，非常感谢您的帮助！

我的HTML:

<div> 
<ul id="contactlist" class=ppl>
    <ol id="demo"></ol>
    <li id="pplli"><img id="wetalk" class="talkbox" src="img/talkbox.png"><p class="contactname">Aiden</p> </li>
    <li id="pplli"> <img id="wetalk1" class="talkbox" src="img/talkbox.png">Jaimie </li>
    <li id="pplli"><img id="wetalk2" class="talkbox" src="img/talkbox.png">Jimmy</li>
    <br>

    <buttom id="clearBtn" style="position:absolute;right:0px;bottom:0px;"></buttom>

    <br>

    <a href="#addform" class="ui-btn" id="add"><img id="plus" src="img/plus.png"></a>
</ul>
</div>

<section id="addform">
    <form name="myform" id="myform">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" class="myfname" placeholder="ex : Jen" name="fname" required><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" class="mylname" placeholder="ex : Shen" name="lname" required ><br>
        <label for="pname">Phone:</label><br>
      <input type="text" id="pname" class="mypname" placeholder="ex : 333-333-333" name="pname" required >
    <input type='button' onclick='addName' class="btn" value='Submit' />

    </form>
</section>

这是我的 javascript:

    var demo = document.getElementById("demo");

    function addName(){
    var fname = document.getElementById("fname").value;
    var entry = document.createElement("li");
    entry.appendChild(document.createTextNode(fname));
    demo.appendChild(entry);
}

非常感谢！

Answer 1

你唯一做错的是

改变

  <input type='button' onclick='addName' class="btn" value='Submit' />

到

 <input type='button' onclick='addName()' class="btn" value='Submit' />

您需要使用 () 传递您的函数名称。

希望对您有所帮助！

在列表中显示表单输入数据

Showing the form input data in the list

html

javascript

form-submit