Question

我正在尝试为用户创建一个拥有记录列表的选项。但是我遇到了以下问题：

当用户尝试创建没有名称的列表时，会将空/不可见元素添加到列表中。我想要代码，要求用户输入名称是否将提示留空。
添加元素时，我希望它们是分开的且不同的元素。现在它们显示并显示为一个。

我希望你们中的一些人可以帮助我克服这个问题。请询问是否有不清楚的地方。

我现在的代码如下：

function myFunction1() {
  var txt;
  var person = prompt("Please enter the name of your record list:");
  if (person == null || person == "") {
    txt = "";
  } else {
    txt = person + "<br>";
  }
  document.getElementById("myRecords").innerHTML += txt;
}

<a id="myRecords"></a>
<a id="create" onclick="myFunction1()">Create RecordList</a>

Answer 1

使用prompt时，最好使用while循环来确保输入了内容。这将继续循环消息，直到用户输入足够的信息为止。当用户点击cancel时，将返回空值。在while循环中，我们检查person是否为空，如果是这种情况，我们将立即返回。

要添加单独的元素，可以使用document.createElement，然后通过使用appendChild方法将该元素附加到所选的父对象。

在下面的代码中，我自由地将myRecords div转换为ul或无序列表标记。输入名称后，会将它们作为li（列表项）子级添加到此标签中。

function myFunction1() {
  var person, ul = document.getElementById("myRecords"), li = document.createElement("li");
  while (!person) {
    person = prompt("Please enter the name of your record list:");
    if (person == null) return;
  }
  li.textContent = person;
  ul.appendChild(li);
}
myFunction1();
myFunction1();

<ul id="myRecords"></ul>

如果您不想使用列表，则只需更新标记并更改要附加的内容即可。 myRecords下面是a标签。像上面一样，我们在锚定标签后附加了div和适当的文本。

function myFunction1() {
  var person, a = document.getElementById("myRecords"), div = document.createElement("div");
  while (!person) {
    person = prompt("Please enter the name of your record list:");
    if (person == null) return;
  }
  div.textContent = person;
  a.appendChild(div);
}
myFunction1();

<a id="myRecords" href="#"></a>

Answer 2

您需要将JS更改为以下内容：

function myFunction1() {
  var txt;
  var person = prompt("Please enter the name of your record list:");
  if (person == "") {
      alert('Please enter a name');
      return;
  } else if(person == null){
      return;
  } else {
      txt =  person;
  }
  var span = document.createElement('span');
  span.setAttribute('class', 'myElement');
  span.innerHTML = txt;
  
  document.getElementById("myRecords").appendChild(span);
}

<a id="myRecords"></a>
<a id="create" onclick="myFunction1()">Create RecordList</a>

使用createElement创建一个新元素，可以使用setAttribute添加一个类，然后将其作为子级通过appendChild附加到myRecords元素中。

Answer 3

您应该使用（无序）列表（<ol>，<ul>）之类的东西，然后在<li>标签中附加包含名称的列表项（<a>）如果需要的话。如果您想在不输入名称的情况下附加一个空项目，则不必使用if语句。

const getRecordList = () => document.getElementById('recordList');
const getCreateButton = () => document.getElementById('create');

function promptInput(value = '') {
  const message = 'Please enter the name of your record list:';
  let name = '';
  while (name === '') {
    name = prompt(message, value);
  }
  return name;
}

function createListItem(name) {
  const listItem = document.createElement('li');
  listItem.innerHTML = `<a onclick="updateRecord(this)">${name}</a>`;
  return listItem;
}

function createRecord() {
  const name = promptInput();
  if (!name) return;
  getRecordList().appendChild(createListItem(name || ''));
}

function updateRecord(li) {
  li.innerHTML = promptInput(li.innerHTML);
}

<h2>Record List</h2>
<ol id="recordList"></ol><hr>
<button id="create" onclick="createRecord()">Create</button>

Answer 4

在不完全知道您要完成什么的情况下，这是我为您提供的解决方案：

function myFunction(prompt_text) {
  var txt;
  var list;
  var person;
  if (prompt_text != '' && prompt_text != undefined) {
    person = prompt(prompt_text);
  } else {
    person = prompt("Please enter the name of your record list:");
  }
  if (person == null || person == "") {
    txt = "";
  } else {
    txt = '<li>' + person + "</li>";
  }
  if (txt != '') {
    document.getElementById("myRecords").innerHTML += txt;
  } else if(person != null){
    myFunction("Names cannot be blank, please enter the name of your record list:");
  } else {
    return;
  }
}

<ul id="myRecords"></ul>
<a id="create" onclick="myFunction()">Create RecordList</a>

我已将要放入数据的容器修改为无序列表<ul></ul>，以更好地促进其中包含多个条目，并自动附加了<li></li> DOM，以便清单为您完成了所有工作。

我还更改了函数以接受prompt_text作为参数，因此，如果他们不输入文本，则可以递归调用该函数。

编辑：更新代码以了解用户单击取消按钮时返回的null，从而消除了我最初发布的代码所产生的错误。

最后的改变是我上面提到的递归函数调用。如果txt变量为空，则该函数使用新的prompt_text进行调用，使您可以让用户知道为什么他们做错了，并给他们提供了另一个纠正它的机会。 / p>

Answer 5

function myFunction1() {
  let person = prompt("Please enter the name of your record list:");
  if (person) {
    let div = document.createElement('div');
    div.innerText=person;
    document.getElementById("myRecords").appendChild(div);
  }else{
    alert('Please enter a name');
  }
}

<a id="myRecords"></a>
<a id="create" onclick="myFunction1()">Create RecordList</a>

您可以createElement和appendChild添加所需的元素。

如何在JavaScript中将单独的元素添加到列表中？

5 个答案: