Вопросы Теги

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

Компилятор Microsoft Visual C ++ игнорирует ключевое слово register, когда включена глобальная оптимизация распределения регистров (флаг компилятора / Oe).

См. регистр ключевого слова в MSDN.

2
задан holydragon 5 March 2019 в 03:56
поделиться

2 ответа

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

  1. addItem в <button onclick=addItem() должны быть внутри кавычек.
  2. Есть дубликаты id. идентификатор должен быть уникальным.
  3. Вы добавляете label внутри ввода. Вот почему вы не можете видеть текст метки.
  4. Используйте атрибут label for. Помимо доступности он также будет проверять и снимать флажок, если вы нажмете на текст. Например, если вы нажмете Eat & amp; Sleep текст в вашем примере, он не будет вносить никаких изменений в флажок. Но в этом примере, если вы создадите флажок через ввод и нажмете на текст, вы увидите изменение в состоянии флажка.
    1. В вашем коде вы загружаете 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>

0
ответ дан brk 5 March 2019 в 03:56
поделиться

входные элементы - это пустые или пустые элементы . Добавление элементов на них не даст вам должного результата. Добавьте элемент 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
ответ дан Mamun 5 March 2019 в 03:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: