Я пытаюсь создать список, но он не создает более 1 списка - PullRequest
Новая
       1

Я пытаюсь создать список, но он не создает более 1 списка

0 голосов
/ 13 февраля 2020

Я могу добавить только 1 список динамически. Я хочу добавлять один список за другим, когда нажимаю кнопку. Кто-нибудь может мне помочь. Кроме того, я не должен ничего делать в моем html файле.

Это мой код 

let newList = document.querySelector('input');
let addList = document.getElementById('addBtn');
let ulist = document.querySelector('ul');

let h1Node = document.createTextNode("");

addList.addEventListener('click', addNewList);
newList.addEventListener('input', updateValue);

function addNewList(e) {
  let head1 = document.createElement('h1');
  let list = document.createElement('li');

  list.appendChild(head1);
  ulist.appendChild(list);
  head1.appendChild(h1Node);
}

function updateValue(e) {
  h1Node.textContent = e.target.value;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Project 1</title>
  <script src="main.js" async></script>
  <link href="main.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
</head>

<body>

  <div class="container">
    <div class="list">
      <ul>
        <li>
          <h1>List Number 1</h1>
        </li>
        <li>
          <h1>List Number 2</h1>
        </li>
        <li>
          <h1>List Number 3</h1>
        </li>
        <li>
          <h1>List Number 4</h1>
        </li>
      </ul>

      <form method="" action="">
        <input type="text" id="to-doList">
      </form>
      <button type="submit" id="addBtn">Add</button>
    </div>
  </div>
</body>
</html>

1 Ответ

0 голосов
/ 13 февраля 2020

Вам нужно создавать новый h1Node каждый раз, когда вы создаете новый элемент списка.

Вам не нужна функция updateValue, просто получите входное значение, когда вы нажимаете кнопку. 

let newList = document.querySelector('input');
let addList = document.getElementById('addBtn');
let ulist = document.querySelector('ul');



addList.addEventListener('click', addNewList);

function addNewList(e) {
  let head1 = document.createElement('h1');
  let list = document.createElement('li');
  let h1Node = document.createTextNode(newList.value);
  list.appendChild(head1);
  ulist.appendChild(list);
  head1.appendChild(h1Node);
  h1Node = document.createTextNode("");

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Project 1</title>
  <script src="main.js" async></script>
  <link href="main.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
</head>

<body>

  <div class="container">
    <div class="list">
      <ul>
        <li>
          <h1>List Number 1</h1>
        </li>
        <li>
          <h1>List Number 2</h1>
        </li>
        <li>
          <h1>List Number 3</h1>
        </li>
        <li>
          <h1>List Number 4</h1>
        </li>
      </ul>

      <form method="" action="">
        <input type="text" id="to-doList">
      </form>
      <button type="submit" id="addBtn">Add</button>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...