How can I dynamically update and execute javascript code in my web page?

Question

I have a website with a <script> tag

<script id='text1' type='text/javascript'></script>

that I insert some javascript code into from a <textarea>

<div id="text2">
    <textarea class="text3"></textarea>
</div>

while executing some javascript

// get text from text area
obj = document.getElementById('text2').getElementsByClassName('text3');
var text = obj[0].value;

// assign to script tag
obj = document.getElementById('text1');
obj.text = text;

and on a button click it executes a function in a namespace from the <textarea> code

var namespace1 = {};
(function(context) {
    context.getGameName = function() {
        return ('text');
    };

})(namespace1);

Everything works just fine, but if I attempt to change the text in the <textarea> and update the contents of the <script> tag, I can see in the console that the contents in the DOM are being updated, but when executing the code again on the button click, the old code is executed, not the new.

How can I update the javascript and execute the new version of a function with the same name?

Please update your question with a runnable minimal reproducible example using Stack Snippets (the [<>] toolbar button). It's hard to tell what code is running where. Fundamentally, once code is parsed and run, any enduring effects it has (such as creating functions) become part of the current state of the JavaScript environment. Unlike (say) CSS rules, removing that script doesn't remove the effects it had. — T.J. Crowder
– T.J. Crowder, Commented Apr 15, 2017 at 8:40

6502 · Accepted Answer · 2017-04-15 09:34:21Z

1

A script tag content is evaluated when the node is first inserted in the DOM, not every time you change its content.

You need to create a new script tag with the new content, remove the old one and insert the new into the DOM.

var s = document.createElement("script");
s.textContent = "console.log('Hello,');"
document.body.append(s); // Will display "Hello," on console
document.body.removeChild(s);

s = document.createElement("script");  // <<-- create a new node
s.textContent = "console.log('world.');"
document.body.append(s); // Will display "world." on console

if you omit the second document.createElement call the "world." call will not be done.

edited Apr 15, 2017 at 9:34

answered Apr 15, 2017 at 9:28

6502

115k17 gold badges177 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GRW Over a year ago

Perfect! Got things working just fine. Appreciate the explanation of evaluation on insertion, not modification. Thanks.

Dzmtrs · Accepted Answer · 2017-04-15 09:23:50Z

0

To define a new version of the function with the same name, just redeclare it (below is one of ways):

var newScript = document.createElement('script');
newScript.innerHTML = document.getElementById('text2').getElementsByClassName('text3')[0].value;
document.body.appendChild(newScript);

You've no need to change the contents of some script tag you've included.

edited Apr 15, 2017 at 9:23

answered Apr 15, 2017 at 9:16

Dzmtrs

4463 silver badges5 bronze badges

Collectives™ on Stack Overflow

How can I dynamically update and execute javascript code in my web page?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related