CODEWITHSUNDEEP
javascripthtmldom
user11066242
user11066242

Reputation: 233

DOM appendChild not giving proper output

I am trying to write a program where in addItem function, the input value will be appended to the checkbox and trying to append the checkbox and the inputted value in an ul through li. I am able to see the checkbox in the output but not the inputted value. However, in console log I am able to see the inputted value. Hence, I think something is wrong in the logic, but not able to figure out what.

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>

Upvotes: 2

Views: 52

Answers (2)

Mamun
Mamun

Reputation: 68933

input elements are empty or void-elements. Appending elements on them will not give you the proper result. Add the label element in li instead of the input element.

Please Note: The attribute id must be unique in a document, you can use class attribute instead.

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>

Upvotes: 1

brk
brk

Reputation: 50291

There are couple of changes you may need to do

  1. addItem in <button onclick=addItem() need to be inside quotes.
  2. There are duplicate id. id should be unique.
  3. You are appending label inside input. That is the reason you cannot see the label text.
  4. Use label for attribute. Beside accessibility it will also check and uncheck the checkbox if you click on the text. For example if you click on Eat & Sleep text in your example , it will not make any change in the checkbox. But in this example if you create a checkbox through the input and click on the text you will see change in the state of the checkbox.
    1. In your code you are loading script.js befor other library files. This may cause an error if script.js have any dependency on the library. First load library then load custom files

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>

Upvotes: 1

Related Questions