Value which is passed into function is not defined?

Question

I'm trying to build a simple todo app and I ran into an error.
I'm getting a text which is typed into input, assigning it to the item with innerText and adding the item to my list when the button is clicked.
But when I'm clicking the button I'm getting text is not defined

I'm a noob in javascript and not sure why this is happening and how to fix it so any help would be appreciated.

This is the link to codepen with my code

document.getElementById('todo').addEventListener('click', function(e) {
  e.preventDefault();
  var value = document.getElementById('input-field').value;
  if (value) {
    //console.log(value)
    addItem(text)
  }
});

function addItem(text) {
  // reveal an input field
  var action = 1;
  if (action) {
    var input = document.getElementById('input-field');
    input.style.width = '0' ? '85%' : '0';
    action = 0;
  } else if (!action) {
    //create element and add it to the DOM
    var list = document.getElementById('list');
    var item = document.createElement('li');
    item.innerText = text;

    var btn = document.createElement('button');
    btn.classList.add('todo__btn');

    item.appendChild(btn);
    list.appendChild(item);

    action = 1;
  }

}
document.getElementById('add-item').addEventListener('click', addItem);

Answer 1

1. action is scoped inside the function, so it is always 1
2. addEventListener calls function(event), so text will be click event arguments, not text.
3. In input.style.width = '0' ? '85%' : '0' the conditional argument is '0'
4. addItem(text) in document.getElementById('todo').addEventListener('click'... is calling an undefined variable text, try addItem(value);

Fixed:

document.getElementById('todo').addEventListener('click', function(e) {
  e.preventDefault();
  var value = document.getElementById('input-field').value;
  if (value) {
    //console.log(value)
    addItem(value);
  }
});

var action = true;

function addItem(e) {
  var input = document.getElementById('input-field');
  // reveal an input field
  if (action) {

    input.style.width = '85%';
    action = false;
  } else if (!action) {
    //create element and add it to the DOM
    var item = document.createElement('li');
    item.classList.add('todo__btn');
    item.innerText = input.value;

    var btn = document.createElement('button');
    btn.classList.add('todo__list-item');

    item.appendChild(btn);
    
    var list = document.getElementById('list');
    list.appendChild(item);

    action = true;
  }

}
document.getElementById('add-item').addEventListener('click', addItem);

@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  background: #8e9eab;
  background: -webkit-linear-gradient(to right, #eef2f3, #8e9eab);
  background: linear-gradient(to right, #eef2f3, #8e9eab);
}

.container {
  width: 90%;
  margin: 0 auto;
}

.app {
  position: relative;
  background: white;
  width: 50%;
  height: 500px;
  margin: 15px auto;
  border-radius: 10px;
}

.header {
  padding: 5px 10px;
  border-radius: 10px;
  background: MediumSlateBlue;
  color: white;
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
}

.todo {
  color: black;
}

.todo__list {
  margin: 10px 0 0 0;
  padding: 0;
}

.todo__list-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  line-height: 2;
  cursor: pointer;
  border-bottom: 1px solid #ebebeb;
}

.todo__list-item:last-of-type {
  margin-bottom: 0;
}

.todo__btn {
  position: relative;
  appearance: none;
  outline: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
  background: none;
  width: 30px;
  height: 30px;
}

.unchecked {
  width: 32px;
  height: 32px;
  background-color: MediumSlateBlue;
  mask-image: url(/img/circle.svg);
  background-size: 100% 100%;
}

.checked {
  width: 32px;
  height: 32px;
  background-color: MediumSlateBlue;
  mask-image: url(/img/check.svg);
}

.form {
  width: 100%;
  height: 50px;
  display: flex;
  position: absolute;
  bottom: 0;
}

.form__btn {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 0 auto;
  outline: none;
  border: none;
  box-shadow: none;
  appearance: none;
  border-radius: 50%;
  background: MediumSlateBlue;
  cursor: pointer;
}

.form__btn svg {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -8px;
}

.form__reveal {
  width: 0;
  text-indent: 10px;
  transition: width 0.3s ease-in-out;
  outline: none;
  border: none;
  appearance: none;
  box-shadow: 0 1px 2px rgba(44, 62, 80, 0.1);
  background: MediumSlateBlue;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  color: white;
  font-size: 1.1em;
}

.form__reveal::-webkit-input-placeholder {
  color: white;
}

.complete {
  color: #9e9ea0;
  text-decoration: line-through;
}

.fill {
  fill: white;
}

<section class="app">
  <header class="header">
    <h1 class="header__head">Today</h1>
  </header>
  <section class="todo" id="todo">
    <div class="container">
      <ul class="todo__list" id="list">
        <li class="todo__list-item">Reading Bukowski
          <button class="todo__btn unchecked"></button>
        </li>
        <li class="todo__list-item complete">Nor rrr
          <button class="todo__btn checked"></button>
        </li>
      </ul>
    </div>
    <form class="form">
      <input class="form__reveal" id="input-field" placeholder="Enter a task">
      <button class="form__btn" id="add-item">
+
          </button>
    </form>
  </section>
</section>

Answer 2

There is some problems with your code:

1. You are calling the function addItem using the wrong parameter (it should be value instead of text as text is undefined withing the callback of the event listener).
2. The else if in the addItem function is never enterd because the if's condition is alwarys true.
3. The lase line is using addItem as the event listener, so when #add-item is clicked the function will be called, but the text argument will be the event.