Add text to 'Create Post' textarea with onclick function

[shawnatdgk]

I cant get it to work with the code I made below. 
It seems that adding a value to the textarea after the page is loaded and through an onclick function is not possible.
Not sure why it won't work. 

I have embedded a button on the posting page which should add text to the posts textarea 
And here's the function:
<script>
//check for board name in nav tree and route name
//add text to textarea using an onclick function

span = document.getElementsByTagName("span");

ta = document.getElementsByTagName("textarea");
var i;


for (i=0; i < span.length; i++) {

if(span[i].innerHTML == "Production" && pb.data("route").name == "new_post") {

        function add() {

                ta[0].value += "Hello";

              }

    }    
}

           

                                         

</script>



Although, I can manage to add text before the page loads. The code below works. 
It adds text to textarea before the page loads. 

<script>

//check for board name in nav tree and route name

//add value to textarea

span = document.getElementsByTagName("span");

ta = document.getElementsByTagName("textarea");

var i;



for (i=0; i < span.length; i++) {

   if (span[i].innerHTML == "Production" && pb.data("route").name == "new_post") {

       ta[0].value= "Stage: Production\n\n";

   }



}

<script>
any help is appreciated 

[Chris]

Without a forum url to view the problem we're reduced to guessing here

The thing that stands out to me in your description is that there is a global variable ("ta") that works during script execution but not later which suggests there is another script that runs after that script that has also chosen to use that same global variable name ("ta") for its own purpose and has overwritten whatever value was stored in that variable . By the time your button click handler fires and tries to use the ("ta") variable it now contains a value other than what it expects to be there.

This is why you usually see experienced coders encapsulate their coding in a function or block so their variable declarations can then be locally scoped but can still be accessed via a spawned function through a mechanism called closure.

More robust codes for adding to quick and full reply can be had here

[shawnatdgk]

Thanks Chris. You led me to the right path.
So I finally figured it out.
Still don't completely understand it, but figured out the answer lol.

I dwindled it down to understand that it was the function that the code didn't like.

If the text is entered into a var within the code using .value=, it recognizes the textarea as the first value of an array "textarea[0] and the text appears in the textarea at page load.".
But if it's in a function, somewhere along the line, that changes.

Because with a function, it only recognizes the textareaby looping through with a 'for loop' rather than the first value of an array.

so yea, not sure how. But that seems to be the case.

[Chris]

May 18, 2021 20:49:19 GMT -8 shawnatdgk said:

Because with a function, it only recognizes the textarea by looping through with a 'for loop' rather than the first value of an array.

Do not try and blame the function, that's impossible. Instead, only try to realize the truth...there is no longer a textarea stored in the var by the time it gets used by that function. Then you will see it is not the function that fails, it is only the scope of the variable being used and its susceptibility to tampering

<script>
/* `span` will be a global variable because it has no var or let keyword preceding it and also defined at the top level */
span = document.getElementsByTagName("span");

/* `ta` will be a global variable because it has no var or let keyword preceding it and also defined at the top level */
ta = document.getElementsByTagName("textarea"); //grab all the textareas on the page

/* `i` will be a global variable because although it uses the var keyword it is defined at the top level */
var i;


for (i=0; i < span.length; i++) {

if(span.innerHTML == "Production" && pb.data("route").name == "new_post") {

        /* this function will be used much later as a click handler, hopefully some unknown script doesn't mess with my global variable between the time I placed a value in it and when I actually want to use it on the click event */
		function add() {
				/* aaarrggghh unknown script destroyed my `ta` variable, it no longer holds the textarea but instead holds the text "tiny atoms" */
                ta[0].value += "Hello";

              }

    }    
}
</script>

<!-- Unknown script runs after the script above -->
<script>

ta = 'tiny atoms'; //global variable `ta` now has "tiny atoms" in it overwriting whatever was there before
alert(ta);

</script>

<script>

/* encapsulating the code in a function means we can protect the variable */
(function encapsulate(){

var span = document.getElementsByTagName("span");

/* this `ta` is now private to the encapsulate function and cannot be overwritten by an outside script */
var ta = document.getElementsByTagName("textarea");

var i;


for (i=0; i < span.length; i++) {

if(span.innerHTML == "Production" && pb.data("route").name == "new_post") {

        
		window.add=function add() {
		/* the private var `ta` can be access in this spawned function even after that old function has closed*/
                ta[0].value += "Hello";

              }

    }    
}
})()
</script>

<!-- Unknown script runs after the script above -->
<script>
/* this creates a global var unrelated to the private var by that same name created in the encapsulate function */
ta = 'tiny atoms'; 
alert(ta);

</script>