DOM appendChild没有给出正确的输出

问题描述 投票：2回答：2

我正在尝试编写一个程序，在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>
javascript html dom
2个回答
1
投票

您可能需要做一些更改

  1. 在addItem的<button onclick=addItem()需要在引号内。
  2. 有重复的id。 id应该是唯一的。
  3. 你在输入中附加label。这就是你看不到标签文字的原因。
  4. 使用label for属性。除了可访问性之外，如果单击文本，它还会选中并取消选中该复选框。例如，如果您在示例中单击Eat和Sleep文本，它将不会对复选框进行任何更改。但在此示例中，如果您通过输入创建一个复选框并单击文本，您将看到复选框状态的更改。 在您的代码中，您正在加载script.js befor其他库文件。如果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>
1
投票

输入元素为空或无效元素。在它们上添加元素不会给你正确的结果。在li中添加label元素而不是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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.