傳入函數的值未定義？

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

1. action的範圍限定在函數內部，所以它總是1
2. addEventListener電話function(event)，所以text將點擊事件參數，而不是文字。
3. 在input.style.width = '0' ? '85%' : '0'條件參數是'0'
4. 在document.getElementById('todo').addEventListener('click'...addItem(text)正在呼叫未定義的變量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>

Answer 2

有一些問題與您的代碼：

1. 您使用了錯誤的參數調用該函數addItem（應該是value，而不是text爲text是undefined withing的事件監聽器的回調）。
2. 在addItem函數中的else if從不輸入，因爲if的條件是alwarys true。
3. 激光線使用addItem作爲事件偵聽器，所以當點擊#add-item時，函數將被調用，但text參數將成爲事件。