Question 160250 in Html Question posted in
Some basic documentation can be found here.

How can I stop variables from leaking in JavaScript?

This is my JavaScript code that I have for 1 js file for each page in my website. it is for a task manager and it saves and gets and displays the data in the webpage however the info that is saved seems to leak over to the other js files.

This is my code how do I possibly contain these variable so that they don’t leak over and the tasks show over to another webpage?
website: https://dailytaskmanager-ss.netlify.app/


var myObj= { 
    textSelect: function(){
        document.getElementById('description').select();
    },

    hide: function() {
    document.getElementById("form").style.display = "none";
    document.getElementById("show").style.display = "inline-block";

},
    show:function(){

    document.getElementById("form").style.display = "block";
    document.getElementById("show").style.display = "none";
    document.getElementById('myDate').valueAsDate = new Date();
    },
    removeTask: function () {
    var id = this.getAttribute('id');
    var myTasks = returnToDo();
    myTasks.splice(id, 1);
    localStorage.setItem('myData', JSON.stringify(myTasks));
    document.getElementById('myTasks').innerHTML = '';
    showMyTasks();
    console.log('delete');

}
};
function returnToDo(){
    var myTasks = [];
    var myTasksTemp = localStorage.getItem('myData');
    if(myTasksTemp != null){
        myTasks = JSON.parse(myTasksTemp);
    }
    return myTasks;
}
function Task(){
    this.name = document.getElementById('name').value;
    this.subject = document.getElementById('subject').value;
    this.date = document.getElementById('myDate').value;
    this.describe = document.getElementById('description').value;
}
function newTask(x,y,z,o){
    document.getElementById('myTasks').innerHTML +=
        '<div class="col l3 m4 s12 animated zoomIn"> <h4>'+z+  ':</h1>'+
        '<p>'+y+'</p>' +
        '<p>By: '+x+'</p>' +
        '<p>Due: ' +o +'</p>'+
        '<div class="btn red" >Delete</div>'+
    '</div>'
}
function showMyTasks(){
    var myTasks = returnToDo();
    document.getElementById('myTasks').innerHTML = '';
    for(var i=0;i<myTasks.length;i++){
        newTask(
            myTasks[i].name,
            myTasks[i].describe,
            myTasks[i].subject,
            myTasks[i].date
        );
    }
    var button = document.getElementsByClassName('red');
    for (var j = 0; j < button.length; j++) {
        button[j].addEventListener('click', myObj.removeTask);
        console.log(button[j].addEventListener('click', myObj.removeTask));

    }
}
function submitInfo(){
    var myTasks = returnToDo();
    myTasks.push(new Task);
    localStorage.setItem('myData',JSON.stringify(myTasks));
    showMyTasks();
    myObj.hide();
}
showMyTasks();
Tags:

2

Answers


  1. 0

    so that they don’t leak over and the tasks show over to another webpage?

    JavaScript programs (in the context of a <script> element) only exist inside the page the element appears in, so this won’t happen.

    the info that is saved seems to leak over to the other js files.

    To avoid variables declared in a <script> element conflicting with variables of the same name in another <script> element on the same page: Don’t use globals.

    Either (in my order of preference):

    1. Use <script type="module" to make your script a module
    2. Wrap your script in a block and use const or let instead of var
    3. Wrap your code in an IIFE

    Also avoid implicit globals. It is worth running your script in strict mode which turns them into errors to make them easier to detect. Modules automatically run in strict mode.

    Login or Signup to reply.
  2. 0

    If you want to use the TODO list and want it to be done on different pages you can use the same basic code, you just need to initialize it so that the key you are saving is unique to that TODO list. So you can just use a variable and have your script use that variable

    <script>
  const todoPage = 'media';
</script>
<script src="yourTodoCode.js"></script>

    and in your code you can use the variable when you read the storage

    // reading it
var myTasksTemp = localStorage.getItem(todoPage);
// and saving it
localStorage.setItem(todoPage, JSON.stringify(myTasks));

    Personally I would be writing a class and avoid globals altogether.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search