Question 193393 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get variable's value outside a function?

I am beginer learning first steps with JS. Today i got problem with Variable. I can’t get the variable’s value outside a function.

First i have this html

    <label for="inputValue">Input here</label>
    <input type="text" id="inputValue">
    <button id="addbtn">Button</button>
    <h4 id="result"></h4>

and scripts like this:

<script>
var inputValue = ""; 
var outputArr = []; 
//I want to get input text by clicking the button

document.getElementbyId('addbtn').addEventListener('click', function() { 
    inputValue = document.getElementById('inputValue').value;
    outputArr.push(inputValue); 
});

console.log(outputArr);

</script>

I want to get outputArr’s value which being got inside the function but the console.log print the variable’s value before changed, pls help me..

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    As you told that the problem is timing, i tried to fix them by separated the code into two listener, mousedown and mouseup, here is what i thought:

    document.getElementById('addbtn').addEventListener('mousedown', function() { 
inputValue = document.getElementById('inputValue').value; 
outputArr.push(inputValue);
document.getElementById('result').innerHTML = outputArr;  
// console.log(outputArr); //Give me exactly the result i wanted. 
}); 

// console.log(outputValue); //This don't give me result because it ran immediately after i set up event listener.

    // but this can give me the answer

    document.getElementById('addbtn').addEventListener('mouseup', function() {
    console.log(outputValue); 
});

    How do you guys think?


  2. 0

    The issue you’re facing is related to the timing of when the console.log(outputArr) statement is executed. Currently, you have it placed outside the event listener function, so it runs immediately after the event listener is set up, but before the button is clicked and the value is assigned to outputArr.
    you are getting vaue outside (in ‘outputArr’) but after click event. use your array outputArr, just that its value will be updated after button click. also use () => {} in place of function() callback

    Login or Signup to reply.
  3. 0

    The way I would approach this is by adding an onclick attribute to your button like this:

    <label for="inputValue">Input here</label>
<input type="text" id="inputValue">
<button id="addbtn" onclick='handleClick()'>Button</button>
<h4 id="result"></h4>

    Then, instead of using an event listener, add a function in your JS like so:

    var inputValue = ""; 
var outputArr = []; 

function handleClick() {
  inputValue = document.getElementById('inputValue').value;
  outputArr.push(inputValue); 
  console.log(outputArr)
}

    From what I tested, it looked like your problem was at the eventListener level, not inside that. Also as Ramesh Kumar said, you need to have the console.log inside of the function or it won’t get updated when the button is pressed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search