Question

我想创建一个html表单，要求用户在文本字段中输入值，然后单击＆＃34;提交＆＃34;按钮。用户点击＆＃34;提交＆＃34;按钮，该值应附加到所有先前输入的值的列表中。用户应该能够选择输入的项目进行编辑或删除。与此类似的东西：

我尝试使用此代码。该项目被添加到列表中，但不是在我之前在图像中显示的可点击格式的框内。

var button = document.getElementById("submit-button");
var text = document.getElementById("text-field");
var list=document.getElementById("list");
button.addEventListener('click', function (event) {
var node = document.createElement("LI");
var textnode = document.createTextNode(text.value);
    node.appendChild(textnode);

//to append the item
list.appendChild(node);}
    , false);

修改这是html代码：

<html>
<head> 
</head>

  <body>    
  <form> 
      Enter URL: <br>
      <input type="text" id="text-field">
      <br> 
      <button id="submit-button">Submit</button>
  </form>
  <ul id="list"></ul>
  <script src="myscript.js"> </script>
  </body>
</html>

Answer 1

您必须使用select，而不是ul代码：

var button = document.getElementById("submit-button");
var text   = document.getElementById("text-field");
var select = document.getElementById("select");

button.addEventListener('click', function (event) {
  event.preventDefault();
  
  if (!text.value) {
    return false;
  }
  
  var textnode = document.createTextNode(text.value);
  var node = document.createElement("option");
  node.appendChild(textnode);

  //to append the item
  select.appendChild(node);
  text.value = '';
  
  return false;
});

#select {
  min-width: 300px;
  min-height: 100px;
}

<form> 
  Enter URL: <br>
  <input type="text" id="text-field">
  <br> 
  <button id="submit-button">Submit</button>
</form>
<br />
<select id="select" multiple="multiple">
</select>

如何在文本区域内的列表中显示输入的项目

1 个答案: