The variable "input" was intended to hold the value entered into the input field, however, it is currently storing

Question

The variable "input" was intended to hold the value entered into the input field, however, it is currently storing

Could you please take a look at the code provided below? The issue I am facing is that "The variable input is supposed to hold the value of an input field, but instead it ends up storing 'undefined'."

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;
    }
});
});

jquery html css

Answer 1

Answer №1

Issue : variable input is undefined

Resolution :

1) Make sure to assign a value to the variable inside the click event, as it is initially undefined

2) Use
var input = $("#input-item").val();
within the $("#add-item").click() function

Review the code snippet provided below:

var count = 0;
        
$(document).ready(function () {
    $("#add-item").click(function () {
        var input = $("#input-item").val();//assigning input variable within the 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>

Answer 2

Issue : variable input is undefined

Resolution :

1) Make sure to assign a value to the variable inside the click event, as it is initially undefined

2) Use
var input = $("#input-item").val();
within the $("#add-item").click() function

Review the code snippet provided below:

var count = 0;
        
$(document).ready(function () {
    $("#add-item").click(function () {
        var input = $("#input-item").val();//assigning input variable within the 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>

The variable "input" was intended to hold the value entered into the input field, however, it is currently storing

Answer №1

Similar questions

The menu lacks responsiveness

How can you spot the conclusion of different lines that refuse to remain in place?

Any suggestions on how to avoid code repetition using Jquery?

PHP Verify that all variables contain no data

Unexpected problem with redrawing HTML application in Android WebView

Implementing position sticky on a div depending on its content text - step by step guide

Labels can sometimes cause text input fields to become unresponsive

Using Ajax to implement the Modal IF functionality

To retrieve data from an AJAX response, you will receive an array in the form of a string

Displaying modal popups limited to one per session

Does the functionality of JSON.parse include recursion?

The Colorful World of CSS Backgrounds

Loading pages asynchronously using Ajax with added interactivity through custom JavaScript scripts

The collapsible feature seems to be malfunctioning in Bootstrap

Exploring the possibilities of personalized attributes/directives in HTML and Javascript

What is the method to modify the text of an element without altering its existing properties?

HTML Button without Connection to Javascript

The disappearance of the final element in an array after adding a new one using JavaScript

When I choose an option from the dropdown list, the check boxes become disabled

Sharing information across various web pages