[SOLVED] Problem with JavaScript on getting value from textarea after button is clicked

Question

Structure:
* 1 textarea to get the text input
* 1 button to fetch text from textarea and show it in the screen
* It will show a loader text in the button while fetching text from textarea and after it is fetched, it will change button text saying "Alert" to alert the data.

Working Process:
1. Some text is given in the textarea
2. It takes few seconds to get and process the code in the textarea, I need to show a loader saying "Getting Text"
3. After the text is fetched and processed successfully, the button text will say "Alert" and after clicking the button the text will be presented on the screen.
4. If the textarea value is changed after the text is fetched, the button text should reset to default and everything will be started from the beginning.

Setup and Problem:
I created a variable called "isChanged" to detect the changes in the textarea and to accept the changes, but it is repeating the step 2 everytime when clicking the button.

My code:
https://code.sololearn.com/WkAhbHHfF4Yy

Answer 1

The .addEventListener() method simply adds the function you pass to it as the callback when the event is triggered. So when the button is clicked, only the function passed to .addEventListener() will be executed, and thus, the
`if (isChanged)` and `if (!isChanged)`
have no significance on the working of these events. These conditions will only be checked once when the execution of the program starts.

Instead what you need to do is, check these conditions *inside* the event listener callback. Like so
https://code.sololearn.com/WqN6vd5zf7sg/?ref=app

Answer 2

XXX Thank You 😊