Redefining function which is in html <script> element

Question

index.html:

<script id="change">
    function methods(){
        return 1;
    }
</script>

js.js:

...
button.addEventListener("click", ()=>{
    document.querySelector("#change").innerHTML = `
        function methods(){
            return 0;
        }
    `;
}
...

Console before clicking button:

>>>methods();
1

Console after clicking button:

>>>methods();
1

How can I update this function?

I've fixed the Markdown issues (code blocks need an empty line before them). — halfer
– halfer, Commented Nov 20, 2020 at 14:25
can't you just use let function1 = function2 or something similar? — Baby_Boy
– Baby_Boy, Commented Nov 20, 2020 at 14:45

Martin · Accepted Answer · 2020-11-20 14:43:47Z

2

Instead of rewriting the script tag content, just overwrite the methods function.

This can be demonstrated easily using the following snippet:

console.log(methods());

methods = function() {
  return 0;
}

console.log(methods());

<script id="change">
    function methods(){
        return 1;
    }
</script>

In the case of your code, in the event handler just do the same:

...
button.addEventListener("click", ()=>{
  methods = function() {
    return 0;
  }
});
...

Edit following OP comment

OP has commented stating that the function content is read out of a database and is stored in a string. This changes the solution required to:

console.log(methods());

var functionText = "return 0;";
methods = Function(functionText);

console.log(methods());

<script id="change">
    function methods(){
        return 1;
    }
</script>

In your original code, this would then look like:

...
button.addEventListener("click", ()=>{
  methods = Function("return 0;");
});
...

edited Nov 20, 2020 at 14:43

answered Nov 20, 2020 at 14:32

Martin

16.5k1 gold badge33 silver badges51 bronze badges

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

3 Comments

Jasurbek Lazizjonov Over a year ago

I am sure this works, but, I am getting some js from database as string

Martin Over a year ago

@JasurbekLazizjonov Probably would have been useful to have put that in the question as that does change the problem. Let me have a think and update the answer

Martin Over a year ago

@JasurbekLazizjonov I've updated to reflect the requirement you mentioned in your comment

s.kuznetsov · Accepted Answer · 2020-11-20 14:37:56Z

1

This is how it works.

let button = document.querySelector('button');

button.onclick = function() { document.querySelector("#change").innerHTML = `
        function methods(){
            return 0;
        }
    `;
}

<script id="change">
    function methods(){
        return 1;
    }
</script>

<button>button</button>

answered Nov 20, 2020 at 14:37

s.kuznetsov

15.3k3 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Redefining function which is in html <script> element

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related