Как добавить отдельные элементы в список в javaScript?

Question

Я пытаюсь сделать опцию, для пользователя, чтобы создать список принадлежащих записей.Однако я столкнулся со следующей проблемой:

1. Когда пользователь пытается создать список без имени, пустой / невидимый элемент добавляется в список.Мне нужен код, чтобы попросить пользователя ввести имя, если он оставил подсказку пустой.
2. Когда добавляются элементы, я хочу, чтобы они были отдельными и разными элементами.Теперь они отображаются и отображаются как один.

Надеюсь, некоторые из вас, ребята, помогут мне решить эту проблему.Пожалуйста, спросите, если что-то кажется неясным.

Мой настоящий код представлен ниже:

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.

В приведенном ниже коде я позволил себе преобразовать ваш div myRecords в 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

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 добавить нужные элементы.

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, позволяющим сообщить пользователю, ПОЧЕМУ он не сделал этого правильно, а также дает ему еще одну возможность исправить это.

Answer 5

вам нужно изменить 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, а затем добавить его в качестве дочернего элемента к своему элементу myRecords через appendChild.