重新定义 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?

Answer 1

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;");
});
...

Answer 2

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>