DOM appendChild не дает правильного вывода - PullRequest
Новая
       0

DOM appendChild не дает правильного вывода

0 голосов
/ 05 марта 2019

Я пытаюсь написать программу, в которой в функции addItem входное значение будет добавлено к флажку, и пытаюсь добавить флажок и введенное значение в ul через li.Я могу видеть флажок в выводе, но не введенное значение.Тем не менее, в журнале консоли я могу видеть введенное значение.Следовательно, я думаю, что-то не так в логике, но не в состоянии понять, что. 

let input = document.getElementById('input');
let addButton = document.getElementById('addButton');
let removeButton = document.getElementById('removeButton');
let ul;
let li;
let inputTag;

const addItem = () => {
  let getItem = input.value;
  ul = document.getElementById('list');
  li = document.createElement('li');
  inputTag = document.createElement('input');
  inputTag.type = 'checkbox';
  inputTag.id = 'check';


  let label = document.createElement('label');
  let newItem = document.createTextNode(getItem);
  console.log(newItem)
  label.appendChild(newItem);
  inputTag.appendChild(label);
  li.appendChild(inputTag);
  ul.appendChild(li);

  input.value = '';
}

const removeItem = () => {

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Hello, world!</title>
</head>

<body>
  <div class="container">

    <div class="controls">
      <h1>Todo App</h1>
      <input type="text" id="input">
      <button onclick=addItem() id="addButton">Add</button>
      <button id="removeButton">Remove</button>
    </div>
    <ul id="list">
      <li class="mycheck">
        <input type="checkbox" id="check">Eat
      </li>
      <li class="mycheck">
        <input type="checkbox" checked id="check">Sleep
      </li>

    </ul>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="script.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

вход элементы пусто или пустые элементы .Добавление элементов на них не даст вам должного результата.Добавьте элемент label в li вместо элемента input .

Обратите внимание: Атрибут id должен быть уникальным в документе, вместо него можно использовать атрибут class . 

let input = document.getElementById('input');
let addButton = document.getElementById('addButton');
let removeButton = document.getElementById('removeButton');
let ul;
let li;
let inputTag;

const addItem = () => {
  let getItem = input.value;
  ul = document.getElementById('list');
  li = document.createElement('li');
  inputTag = document.createElement('input');
  inputTag.type = 'checkbox';
  inputTag.class = 'check';

  let label = document.createElement('label');
  let newItem = document.createTextNode(getItem);
  //console.log(newItem)
  label.appendChild(newItem);
  li.appendChild(inputTag);
  li.appendChild(label);
  ul.appendChild(li);

  input.value = '';
}

const removeItem = () => {

}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Hello, world!</title>
  </head>
  <body>
      <div class="container">

        <div class="controls">
          <h1>Todo App</h1>
          <input type="text" id="input">
          <button onclick=addItem() id="addButton">Add</button>
          <button id="removeButton">Remove</button>
        </div>
        <ul id="list">
          <li class="mycheck">
            <input type="checkbox" class="check">Eat
          </li>
          <li class="mycheck">
              <input type="checkbox" checked class="check">Sleep
            </li>

        </ul>
      </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
0 голосов
/ 05 марта 2019

Есть несколько изменений, которые вам нужно сделать

  1. addItem в <button onclick=addItem() должны быть внутри кавычек.
  2. Есть дубликаты id.идентификатор должен быть уникальным.
  3. Вы добавляете label внутри ввода.Вот почему вы не можете видеть текст метки.
  4. Использовать атрибут label for.Помимо доступности он также будет проверять и снимать флажок, если вы нажмете на текст.Например, если вы нажмете на текст Eat & Sleep в вашем примере, он не внесет никаких изменений в этот флажок.Но в этом примере, если вы создадите флажок через ввод и нажмете на текст, вы увидите изменение в состоянии флажка.
  5. В вашем коде вы загружаете script.js для других библиотечных файлов.Это может вызвать ошибку, если script.js имеет какую-либо зависимость от библиотеки.Сначала загрузите библиотеку, затем загрузите пользовательские файлы 

let input = document.getElementById('input');
let addButton = document.getElementById('addButton');
let removeButton = document.getElementById('removeButton');
let ul;
let li;
let inputTag;

const addItem = () => {
  let getItem = input.value;
  console.log(getItem)
  ul = document.getElementById('list');
  li = document.createElement('li');
  inputTag = document.createElement('input');
  inputTag.type = 'checkbox';
  inputTag.id = 'check_' + getItem;
  let label = document.createElement('label');
  label.setAttribute('for', 'check_' + getItem)
  let newItem = document.createTextNode(getItem, );
  label.appendChild(newItem);
  //inputTag.appendChild(label);

  li.appendChild(inputTag);
  li.appendChild(label);
  ul.appendChild(li);

  input.value = '';
}

const removeItem = () => {

}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>

<div class="container">

  <div class="controls">
    <h1>Todo App</h1>
    <input type="text" id="input">
    <button onclick="addItem()" id="addButton">Add</button>
    <button id="removeButton">Remove</button>
  </div>
  <ul id="list">
    <li class="mycheck">
      <input type="checkbox" id="check">Eat
    </li>
    <li class="mycheck">
      <input type="checkbox" checked id="checkSleep">Sleep
    </li>

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

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

...