jquery - 变量 input 应该存储输入字段的值，但它存储 undefined

Question

请查看以下代码。 “变量输入应该存储输入字段的值，但它存储未定义”

var input = $("#input-item").val();
var count = 0;
$(document).ready(function() {
$("#add-item").click(function() {

    if(input !== "" || input !== null) {
        $("#ulTodo").append("<li " + "name=li" + count + ">" + input + "</li>");
        count += 1;
    }

    else {
        return false;
    }
});
});

标签： jqueryhtmlcss

Answer 1

问题：变量input是undefined

解决方案 ：

1）您在侧点击事件中分配了变量值，这意味着一开始没有值

2)var input = $("#input-item").val();在 $("#add-item").click()活动中申请

检查以下代码：

var count = 0;
        
$(document).ready(function () {
    $("#add-item").click(function () {
        var input = $("#input-item").val();//input variable assigned in click event
        if (input !== "" || input !== null) {
            $("#ulTodo").append("<li " + "name=li" + count + ">" + input + "</li>");
            count += 1;
        }
        else {
            return false;
        }
    });
});

p {
    margin-top:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="input-item" name="input-item" placeholder="add an item to the list...">
<button id="add-item">Add this item</button>

<p>Item list as below :</p>
<ul id="ulTodo">
    <li>this is item 1</li>
</ul>