Question

我正在尝试在Javascript中创建一个包含提交按钮的列表。输入一个项目后，我希望它显示在先前输入的项目下。到目前为止，我放入的项目取代了之前的项目。任何方向非常感谢

Answer 1

这是您正在寻找的东西 - ＆gt;

HTML代码：

First name:
<input type="text" id="firstname">
<br>
<p>Your first name is: <b id='boldStuff2'></b> 
</p>
<p>Other people's names:</p>
<ol id="demo"></ol>
<input type='button' onclick='changeText2()' value='Submit' />

和JS：

var list = document.getElementById('demo');

function changeText2() {
    var firstname = document.getElementById('firstname').value;
    document.getElementById('boldStuff2').innerHTML = firstname;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstname));
    list.appendChild(entry);
}

Answer 2

使用.appendChild()可以解决您的问题。此外，由于submit事件，您可以单击提交按钮或按ENTER键。

ul = document.getElementById("ul");
form = document.getElementById("form");
div = document.createElement("div");
form.elements.text.focus();

form.addEventListener("submit", function (ev) {
  var textEl = this.elements.text;
  ul.appendChild(makeLI(textEl.value));
  textEl.value = "";
  ev.preventDefault();
});

function makeLI (content) {
  div.innerHTML = "<ul><li>" + content + "</li></ul>";
  return div.firstChild.firstChild;
}

<form action="" id="form">
  <p>
    <input type="text" name="text" />
    <input type="submit" />
  </p>
</form>
<ul id="ul"></ul>

Answer 3

它就像它一样简单。请考虑以下示例：

<html>
<input id="name"></input>
<label id="nameDisplay"></label>
<input id="place"></input>
<label id="placeDisplay"></label>
<button onclick="display()">Click</button>
</html>

<script>
function display(){
    name = document.getElementById('name').value;
    place= document.getElementById('place').value;
    document.getElementById('nameDisplay').innerHTML = name;
    document.getElementById('placeDisplay').innerHTML = place;
}
</script>

这里'innerHTML'是你问题的强大武器！这将删除前面的代码并仅显示当前值。

在Javascript中列出，添加并显示所有项目

3 个答案: