htmlinputcreatelielement如何為元素設定id-有解無憂

我是 HTML 和 JS 的新手，我面臨以下問題：

我在 html 中有一個輸入，它創建了一個新的 li 元素（與 JS 結合）；是否可以為每個新創建的 li 元素賦予其自己的 id？例如洗掉特定元素？

例如：

<li id="one"> .. </li>
<li id="two"> .. </li>

到目前為止，它只創建<li> ... </li>

我認為它可以通過for回圈來完成，但我不知道如何在我的情況下使用它。

請參閱下面的我的 JS 代碼：

function NewEntry() {
    var Inputfield = document.getElementById("Inputfield");
    var AddButton = document.getElementById("AddButton");
    var ul = document.querySelector("ul");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(Input.value));
    ul.appendChild(li);
    Input.value = "";

我試圖在for我的代碼中插入一個回圈，但之后它不會添加任何元素。

function NewEntry() {
    var Inputfield = document.getElementById("Inputfield");
    var AddButton = document.getElementById("AddButton");
    var ul = document.querySelector("ul");
    var li = document.createElement("li");
    for (var i = 0; i < li.length; i  )
      li[i].id = 'abc-'   i;
      li.appendChild(document.createTextNode(Input.value));
      ul.appendChild(li);
    Input.value = "";

uj5u.com熱心網友回復：

您的for回圈需要花括號才能正常作業：

function NewEntry() {
  var Inputfield = document.getElementById("Inputfield");
  var AddButton = document.getElementById("AddButton");
  var ul = document.querySelector("ul");
  var li = document.createElement("li");
  for (var i = 0; i < li.length; i  ) {
    abcElements[i].id = 'abc-'   i;
    li.appendChild(document.createTextNode(Inputfield.value));
    ul.appendChild(li);
  }
  Inputfield.value = "";
}

否則，只有for陳述句之后的直接行將作為回圈的一部分運行。

似乎還有一個錯字 - 你有Input而不是Inputfield？但是我注意到這里使用的其他一些變數沒有定義，所以我假設省略了一些額外的代碼？

uj5u.com熱心網友回復：

您可以計算內部元素的數量<ul>并將其用作 id <li>：

var AddButton = document.getElementById("AddButton");
AddButton.addEventListener("click", NewEntry);

function NewEntry() {
  var Inputfield = document.getElementById("Inputfield");
  var ul = document.querySelector("ul");
  var li = document.createElement("li");
  li.id = ul.childElementCount;
  li.appendChild(document.createTextNode(Inputfield.value));
  ul.appendChild(li);
  Inputfield.value = "";
  console.log(li);
}

<input type="text" id="Inputfield" />
<button id="AddButton">Add</button>
<ul></ul>

uj5u.com熱心網友回復：

謝謝你的回復。

如果我嘗試以下操作，我將無法添加新條目。按鈕不起作用。

我的事件監聽器

AddButton.addEventListener("click", NewEntry);

My JS Funktion 添加一個新的 li 元素

function NewEntry() {
var Inputfield = document.getElementById("Inputfield");
var AddButton = document.getElementById("AddButton");
var ul = document.querySelector("ul");
var li = document.createElement("li");
for (var i = 0; i < li.length ; i  ) {
    InputElement[i].id = 'InputElement-'   i;
    li.appendChild(document.createTextNode(Inputfield.value));
    ul.appendChild(li);
    Inputfield.value = ""; 
}

}

如果我嘗試以下操作，按鈕仍然不起作用。

    function NewEntry() {
    var Inputfield = document.getElementById("Inputfield");
    var AddButton = document.getElementById("AddButton");
    var ul = document.querySelector("ul");
    var li = document.createElement("li");
    for (var i = 0; i < li.length ; i  ) {
        InputElement[i].id = 'InputElement-'   i;
        li.appendChild(document.createTextNode(Inputfield.value));
        ul.appendChild(li);
}
        Inputfield.value = ""; 
}

我的 HTML 檔案中只有這個用于我的測驗

<input type="text" id="Inputfield" placeholder="New">
<button id="AddButton"> Add </button>

uj5u.com熱心網友回復：

一種簡單的實作方法如下，在 JavaScript 中帶有解釋性注釋：

// a generator function, to generate a constantly increasing counter:
const generator = function*() {
    // the initial value of the counter:
    let i = 0;
    // this loop causes the generator to return a number infinitely
    // though while the loop is infinite it yields one value and then
    // pauses until the next call; this is one instance where an
    // infinite loop is deliberate and not a problem:
    while (true) {
      // increments the value of i, and then returns it to the
      // calling context:
      yield   i;
    }
  },
  // assigning a reference to the generator:
  counter = generator(),
  // a simple Arrow function that takes two arguments:
  // tag: String, the element-type to create, and
  // props: an Object of element-properties and values to
  // assign to the created element:
  create = (tag, props) => Object.assign(document.createElement(tag), props),
  // a reference to the various elements to which event-listeners are attached:
  list = document.querySelector('#list'),
  form = document.querySelector('form'),
  input = document.querySelector('input'),
  button = document.querySelector('#add'),
  // the addNew function, written as an Arrow function:
  addNew = () => {
    // caching the source of the text:
    const inputField = document.querySelector('input');

    // here we take the value, trim it to remove leading and trailing
    // white-space, and then retrieve its length; if there is a zero
    // length (so either nothing was entered, or only whitespace) then
    // we return here:
    if (inputField.value.trim().length === 0) {
      return false;
    }

    // otherwise we cache a reference to the element to which the
    // created <li> element will be appended:
    const ul = document.querySelector('#list'),
      // we call the create() function, here creating an <li>
      // element, and passing in an object of properties and
      // values:
      li = create('li', {
        // we set the 'id' - using a template literal string - to
        // the string of 'abc-' plus next-value of the counter:
        id: `abc-${counter.next().value}`,
        // and set the text-content of the element to the
        // trimmed value of the <input>:
        textContent: inputField.value.trim()
      }),
      // here we create a <button>,
      deleteButton = create('button', {
        // with its className set to 'delete':
        className: 'delete',
        // its text-content set to 'delete task':
        textContent: 'delete task',
        // and its type set to 'button' in order to
        // prevent the <button> submitting the <form>:
        type: 'button'
      });

    // we append the created <button> to the created <li>:
    li.append(deleteButton);
    // we append the <li> to the <ul>:
    ul.append(li);
    // and reset the value of the <input> to an empty string:
    inputField.value = '';
  };

// here we prevent form submission:
form.addEventListener('submit', (e) => e.preventDefault());

// here we bind an anonymous function as the event-handler of the
// 'keyup' event on the <input> element:
input.addEventListener('keyup', (evt) => {
  // if the, or an, 'Enter' key is pressed (note that evt.keyCode is
  // almost entirely deprecated now, but is here for backwards
  // compatibility, it can and possibly should be removed):
  if (evt.key === 'Enter' || evt.keyCode === 13) {
    // here we call the addNew() function:
    addNew();
  }
});

// we bind the addNew() function - note the deliberate lack of
// parentheses - as the event-handler for the 'click' event:
button.addEventListener('click', addNew);

// because we're adding the delete <button> elements we delegate the
// event-handling to the closest ancestor element present in the DOM
// on page-load, here that's the #list element. Here we bind the
// anonymous function as the event-handler for the 'click' event
// which bubbles to the <ul>:
list.addEventListener('click', (evt) => {
  // if the element on which the click event fired has an ancestor
  // .delete element (therefore it was fired on, or in, the .delete
  // <button>):
  if (evt.target.closest('.delete')) {
    // we navigate from the event-target to the closest <li>
    // ancestor element and use Element.remove() to remove that
    // element from the document:
    evt.target.closest('li').remove();
  }
})

*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

main {
  inline-size: clamp(15em, 80vw, 1000px);
  margin-inline: auto;
}

h2 {
  font-size: 1.4em;
  text-align: center;
}

fieldset {
  display: grid;
  padding: 0.5em;
}

legend {
  border-inline: 1px solid currentColor;
  border-radius: 0.25em;
  margin-inline: 1em;
  padding-inline: 0.5em;
}

label {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  margin-block: 0.5em;
}

label input[type=text] {
  flex-grow: 1;
}

#list {
  border: 1px solid currentColor;
  display: grid;
  gap: 0.5em;
  list-style-type: none;
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.5em;
}

#list:empty::before {
  color: hsl(0deg 30% 30% / 0.8);
  content: "A beautiful, quiet day of reflection...";
  font-style: italic;
}

#list li {
  background-color: lavender;
  display: grid;
  padding: 0.25em;
}

#list li:nth-child(odd) {
  background-color: lightcyan;
}

li[id]::before {
  content: "#" attr(id) ": ";
}

.delete {
  justify-self: end;
}

<main>
  <section>
    <h2>To do list</h2>
    <form action="#" method="post">
      <fieldset>
        <legend>New task</legend>
        <label>
          <span class="labelText">What do you want to do today?</span>
          <input type="text">
        </label>
        <button id="add" type="button">Add task to list</button>
      </fieldset>
    </form>
    <ul id="list"></ul>
  </section>
</main>

JS 小提琴演示。

值得注意的是，使用生成器函式為id屬性生成計數器存在一個潛在問題。計數器只會增加，所以如果你有三個元素abc-1, abc-2，abc-3然后洗掉它們，并創建另外三個元素，這些元素將從繼續abc-4。因此，id將獨立于創建元素的數量。這可能是一個好處，因為無法創建重復值，因此生成器創建重復值的可能性很小id。

參考：

箭頭函式。
document.createElement().
document.querySelector().
Element.append().
Element.remove().
EventTarget.addEventListener().
生成器函式 ( function*(){...})。
Object.assign().
String.prototype.trim().
模板文字。
while回圈。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/528641.html

標籤：javascripthtml列表输入html 列表

上一篇：Python3，遍歷一個.txt檔案，使用另一個.txt檔案中的值，然后創建匹配的變數

下一篇：如何將行檢索為串列而不是字串？