Question

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

我是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

您的代码存在一些问题：

您正在使用错误的参数调用函数addItem（它应该是value而不是text，因为text是undefined，而回调是else if事件监听器）。
addItem函数中的if永远不会输入，因为true的条件是alwarys addItem。
激光线使用#add-item作为事件监听器，因此当单击text时，将调用该函数，但{{1}}参数将是事件。

Answer 2

action在功能范围内，因此始终为1
addEventListener调用function(event)，因此text将是点击事件参数，而不是文字。
在input.style.width = '0' ? '85%' : '0'中，条件参数为'0'

addItem(text)

document.getElementById('todo').addEventListener('click'...正在调用未定义的变量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>

传递给函数的值没有定义？

2 个答案: