Why Is the Variable Holding the Input Value Always Logged as Empty

Why is the variable holding the input value always logged as empty?

You were getting the value when the document is loaded. At this time, the value is empty. You need to get the value inside your click event.

(function() {
  var button = document.getElementsByTagName("button");
  var userInput = document.getElementById("user_input"); // Get only the element.

  button[0].addEventListener("click", function() {
    console.log(userInput.value); // Get the value here.
  }, false);
})();

<form>
  <input id="user_input" type="text" placeholder="add new task">
  <button type="button">Add</button>
</form>

getElementById(x).value changes the output depending on the context

When you do

const number = document.getElementById("number").value; // will not give the expected value later on

You are getting the initial value of the input, which is empty, so you are getting a "" string.

Then, when parsing it to an integer, you get NaN since "" cannot be a number

---

Instead, when doing

const numberCorrect = document.getElementById("number"); // will give the expected value later on

You are getting a reference to the input. So when you type something on it, the reference would be the same and calling parseInt(numberCorrect.value) would give you the current value of the input.

Input box value is showing blank on button click

when you initialize var name in document.ready(), the name variable give a value of input at load of page, so value of name equals to nothing (empty string). so you must change your code that your input value read when button is clicked.

$(document).ready(function() {
    $('#showName').click(function() {
        var name = $("#name").val();
        alert(name);
    });
});

Returning empty string on a input that has a value

To ensure things are loaded in the correct order, it is useful to apply a page sniffer code snippet that will scan the page continuously until a condition is met, or until a preset counter limit is reached (to prevent strain on browser memory). Below is an example of what I typically use that would fit your scenario.

I think because you are dealing with asynchronous loading, you can't have a global variable that holds the values in a global scope without an interval to detect when it can be used. Otherwise, it will attempt to read the variable when it is not yet ready.

You can invoke functions anywhere you like. But I would keep all of your variables contained within the page_sniffer_2017() because that is a controlled environment where you know that everything successfully loaded and you know that the variables are ready to be accessed without error.

That way, regardless of connection speed, your functions will only fire when ready and your code will flow, sequentially, in the right order.

Within the ajax success options, always add a class to the body of the document that you can search on to determine if it has finished loading.

$(document).ready(function() {
    page_sniffer_2017();
});

function page_sniffer_2017() {
    var counter = 0;
    var imgScanner = setInterval(function() {
        if ($("#datepicker-range").length > 0 && $("#datepicker-range").val().length && jQuery('body').hasClass('date-picker-successfully-generated')) {
            var periodoDatepicker = $("#datepicker-range").val(); // ok 
            console.log(periodoDatepicker); // ok 
            var variaveis = returnInputVars(replaceDate(periodoDatepicker)); // ok 
            console.log(variaveis[0], variaveis[1], variaveis[2]);
            //startNewSelectors(variaveis); 
            // start ajax call 
            generateData(variaveis[0], variaveis[1], variaveis[2]);
            clearInterval(imgScanner);
        } else {
            //var doNothing = ""; 
            counter++;
            if (counter === 100) {
                console.log(counter);
                clearInterval(imgScanner);
            }
        }
    }, 50);
}

Alert new value from user input

password is assigned before the <input>'s value changes, so it will always be blank. Instead, you need to assign it within the onclick so that it is assigned the updated value.

document.getElementById("submit").onclick = function newValue() {
  var password = document.getElementById("password").value;
  alert(password);
};

---

Related Topics