Global variable declaration returns undefined, any reason for this

Question

When I log input to the console, it returns undefined but when put inside a the anonymous function, it logs to the console as expected

I had tried the below code, and expected that the inputValue to be logged to the console on click of the addButton, however, the value from inputValue when logged was undefined, the value of inputValue is meant to be gotten from an inputbox.

`

const addButton=document.querySelector(".addButton");
let listBox=document.querySelector(".listBox");
let input=document.querySelector(".addtext").value;
let inputValue=input;
addButton.addEventListener('click',()=>{
console.log(inputValue)});

</script>
</body>
</html>`

Because it _is_ undefined at the point - the user hasn't entered anything. But they might have once that button is clicked. — Andy, Jan 25 '23 at 03:40
Thank you, but even when a value is entered to the input, it is logs empty to the console — Samuel666, Jan 25 '23 at 05:21
There's no way to get `undefined` as the value of `input`, even when it's empty, rather `.addText` element is not an input element. Though I guess `undefined` you see in the console is the return value of `console.log` with an empty string above it. — Teemu, Jan 25 '23 at 05:35
See https://stackoverflow.com/questions/10263190/why-does-this-javascript-code-print-undefined-on-the-console — Teemu, Jan 25 '23 at 05:44

score 2 · Answer 1 · answered Jan 25 '23 at 03:45

2

Maybe because this line of code captures the value before it get changed:

let input=document.querySelector(".addtext").value;

Try this:

const addButton=document.querySelector(".addButton");
let listBox=document.querySelector(".listBox");
let input=document.querySelector(".addtext");
addButton.addEventListener('click',()=>{
console.log(input.value)});

answered Jan 25 '23 at 03:45

Mr_NAIF

96
6

Thank you, your solution worked, might you explain why mine did not work, I was of the thought that the dom would have assigned these values... – Samuel666 Jan 26 '23 at 02:51

score 0 · Answer 2 · answered Jan 25 '23 at 03:48

Here is some code that I created based on your sample. I've also included a codepen for demo.

the keyword let isn't hoisted and it is limited in scope. variables defined with var are hoisted, meaning they are brought to the top of the script and executed first when the JS file is processed by the browser.

Here is my code, I made all of the variable targeting the controls as const.

Then I reference the value property in the event handler.

<div>
    <select class="listBox">
        <option value="a"> Option A </option>
        <option value="b"> Option B </option>
        <option value="c"> Option C </option>
    </select>
    <input type="text" class="addtext" />  
    <button class="addButton"> Add </button>
</div>

This is the JS Code:

const addButton=document.querySelector(".addButton");
const listBox=document.querySelector(".listBox");
const input=document.querySelector(".addtext");
addButton.addEventListener('click',() => {
  console.log(input.value)
});

https://codepen.io/glennferrie/pen/gOjeQNx

Global variable declaration returns undefined, any reason for this

2 Answers2