javascript - 传递给函数的值未定义？

Question

我正在尝试构建一个简单的待办事项应用程序，但遇到了错误。
我收到了一个输入到输入中的文本，将其分配给带有 insideText 的项目，并在单击按钮时将该项目添加到我的列表中。
但是当我单击按钮时，我得到文本未定义

我是 javascript 新手，不知道为什么会发生这种情况以及如何修复它，因此我们将不胜感激。

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 的作用域位于函数内部，因此它始终为 1
2. addEventListener 调用 function(event)，因此 text 将是点击事件参数，而不是文本。
3. 在 input.style.width = '0' 中？ '85%' : '0' 条件参数为 '0'
document.getElementById('todo').addEventListener('click'... 中的
4. addItem(text) 正在调用 undefined variable text，尝试addItem(value);

已修复:

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>