Reputation: 135

Function will not update variable

The variable status is set to "uncheck" and needs to be updated to "done" using the change() function.

Ultimately what needs to happen When button with id randomIdTwo is pressed, The completeTodo() function is called which causes the list item to be removed from its current div "list", appended to the div "complete-list", and the change() function updates the value of the "status" variable from "uncheck" to "done".

Everything works except the change() function.

document.getElementById('button').addEventListener('click', function addTodo() {
  var value = document.getElementById('input').value;
  var status = "uncheck";
  var randomId = Math.random();
  var randomIdTwo = Math.random();

  function change() {
    status = "done";
  };

  const item = `<li>
                    <div class="item">
                       <div class="complete">
                        <button id="` + randomIdTwo + `" class="${status}"></button>
                       </div>
    
                       <p class="text">${value}</p>
    
                        <div class="remove">
                           <button id="` + randomId + `" class="todo"></button>
                        </div>
                     </div>
                  </li>`;
  const position = "beforeend";

  list.insertAdjacentHTML(position, item);
  document.getElementById(randomId).addEventListener('click', function removeTodo() {
    var item = this.closest('li');
    item.remove();
  });
  document.getElementById(randomIdTwo).addEventListener('click', function completeTodo() {
    var item = this.closest('li');
    item.remove();
    document.getElementById("completelist").appendChild(item);
    change();
  });
});

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
  <link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>

<body>
  <div class="container">
    <header>
      <div id="datetime"></div>
      <div id="ampm"></div>
      <input type="text" id="input" placeholder="Add an item" />
      <button id="button" type="button"><img src="./img/additem4.png"></button>
    </header>
    <div id="list">
    </div>

    <div id="divline"></div>

    <div id="completelist">
    </div>
  </div>
  <script src="resources/JS/app.js"></script>
</body>

</html>

Upvotes: 0

Answers (2)

Thomas Preston

Reputation: 707

You're using string interpolation to set the class initially, but string interpolation does not create a data-binding between the resultant element and the variable. So change() is being called, and status is being updated, but the value of the element you created via a string isn't seeing that change, so it's not being updated.

You would need to access the element in the DOM and change it's classList manually.

Upvotes: 0

Barmar

Reputation: 781068

Changing the status variable doesn't change the class of the element. You need to update the button's classList

document.getElementById('button').addEventListener('click', function addTodo() {
  var value = document.getElementById('input').value;
  var status = "uncheck";
  var randomId = Math.random();
  var randomIdTwo = Math.random();

  function change(button) {
    button.classList.add("done");
    button.classList.remove("uncheck");
  };

  const item = `<li>
                    <div class="item">
                       <div class="complete">
                        <button id="` + randomIdTwo + `" class="${status}"></button>
                       </div>
    
                       <p class="text">${value}</p>
    
                        <div class="remove">
                           <button id="` + randomId + `" class="todo"></button>
                        </div>
                     </div>
                  </li>`;
  const position = "beforeend";

  list.insertAdjacentHTML(position, item);
  document.getElementById(randomId).addEventListener('click', function removeTodo() {
    var item = this.closest('li');
    item.remove();
  });
  document.getElementById(randomIdTwo).addEventListener('click', function completeTodo() {
    var item = this.closest('li');
    item.remove();
    document.getElementById("completelist").appendChild(item);
    change(this);
  });
});

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
  <link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>

<body>
  <div class="container">
    <header>
      <div id="datetime"></div>
      <div id="ampm"></div>
      <input type="text" id="input" placeholder="Add an item" />
      <button id="button" type="button"><img src="./img/additem4.png"></button>
    </header>
    <div id="list">
    </div>

    <div id="divline"></div>

    <div id="completelist">
    </div>
  </div>
  <script src="resources/JS/app.js"></script>
</body>

</html>

Upvotes: 1

Function will not update variable

Answers (2)

Related Questions