2

The problem is that I dynamically change 'div' content that contains script tags, so when I want to re-add and execute the same script that was removed previously, I get

Uncaught SyntaxError: Identifier 'var-name' has already been declared

error, because of variables that already declared in the re-executed script.

so these variables, for example, give me the same error when remove, re-add and then re-execute the same script tag:

let var1 = "111";
let var2= "222";

I have tried to declare with var and remove them using delete operator, but it didn't work, and I want to use let to declare variables.

Edit: I got multiple scripts and each one calls functions and sometimes initiates variables from another scripts.

TameemHabash
  • 88
  • 7
  • Wrap the script in `(function() {` and `})();` –  May 18 '20 at 21:00
  • @ChrisG I'm new to javascript, so I wondering if it is fine to write scripts in this way? – TameemHabash May 18 '20 at 22:31
  • Does this answer your question? [javascript- Uncaught SyntaxError: Identifier \* has already been declared](https://stackoverflow.com/questions/49774769/javascript-uncaught-syntaxerror-identifier-has-already-been-declared) –  May 19 '20 at 08:04
  • thanks, but actually no it is not, I have seen it before I asked my question – TameemHabash May 19 '20 at 12:44

2 Answers2

2

Chris G is right (though I don't know why people still use comments for answers).

Wrap the script in a function, and the variables will expire immediately. 

<script>
    (function(){
        // let [your variables here]
        // your script here
    })();
</script>
SUM1
  • 771
  • 8
  • 13
  • thanks, but I'm new to javascript, so I'm wondering, is it fine to write scripts in this way? – TameemHabash May 18 '20 at 22:34
  • I tried it, and this approach gives me 'is not defined' errors for functions and variables that were already declared in the 'self invoked function' as they are only can be seen inside the same .js file – TameemHabash May 18 '20 at 22:43
  • Well if you want something to be accessible outside of the function, keep it outside of it. I don't know what your precise scripts are (that would be helpful). Keep any variables you want released inside a function, whether it's anonymous (`(function(){`) or named and called (`function myFunction(){...}; myFunction();`) – SUM1 May 18 '20 at 22:49
  • The idea is that I have 3 HTML files (login, register, and todo), they are loaded dynamically according to user behavior. every one of them got 3 scripts included (model, controller, and view). the problem comes for example when I load 'todo' then 'login' then return back to 'todo', the variables that already declared in 'todo_view' and 'todo_model' give the error described in the question. when trying to use the way you suggested it, the 'todo_controller' can't reach variables and functions declared in 'todo_model'. – TameemHabash May 19 '20 at 00:14
  • here's the GitHub repo link if can give the full view https://github.com/TameemHabash/MVC-Registration-APP.git but you need to navigate to tea branch to see the latest update – TameemHabash May 19 '20 at 00:16
  • I "use comments for answers" when the question isn't supposed to be permanently added to this website and will get flagged for removal, as (in this case obvious) duplicate or will probably be deleted by the author themselves. Since OP still needs help, I post a quick comment to help them. –  May 19 '20 at 08:06
  • @tameem Have you tried declaring all your repeated variables separately? Try and make it so that the different functions and files only reassign the variable instead of re-declaring it. Alternatively, you could try using `var` instead of `let`, which does allow declaring the same variable twice, but that's a dirty fix. – SUM1 May 19 '20 at 15:56
  • I don't understand what do you exactly mean by "declaring variables separately", but I think the answer is no because I only declared them once but the error comes when I reload the same `html` file that contains the same variables that was declared in the script include wihtin the `html`. And please if there is any solutions rather than use of `var` it will be better fore to take it. Do you suggest something any thing to avoid using `var`? . And sorry for my English too – TameemHabash May 20 '20 at 01:35
0

The answer is as @SUM1 and @Chris G said, but I didn't elucidate the whole problem at first.

I need to use self-invoked function to whole scripts but need also to return an object that contains functions that will be used in another script to prevent is not defined or is not a function errors.

in other words, I was in need to Follow module pattern. read these articles for more information:

1- module pattern - gitconnected

2- module pattern - medium

TameemHabash
  • 88
  • 7