Issue with Ionic toggles not updating the correct local storage entry

Encountering an issue with ionic toggles where changing any toggle affects only the last if statement below in local storage.

Here is the list of toggles...

$scope.settingsList = [

    { text: "GBP", checked: gbpON },
    { text: "USD", checked: usdON },
    { text: "EURO", checked: euroON },
    { text: "AUD", checked: audON },
    { text: "CAD", checked: cadON },
    { text: "YEN", checked: yenON }
];

This is the HTML...

<div class="list">  
    <ion-toggle ng-repeat="item in settingsList"
                ng-model="item.checked" 
                ng-checked="item.checked"
                ng-change="toggleONOFF({{item.text}})"
                toggle-class="toggle-royal">
      {{item.text}}
    </ion-toggle>
</div> 

and this is what happens when you click the toggle...

$scope.toggleONOFF = function($var) {

    // GBP is toggled
    if ($var = "GBP") {   

        if (localStorage.getItem("gbpON") == "true") {  

            localStorage.setItem("gbpON", false);

        } else {

            localStorage.setItem("gbpON", true);    
        }
    };

    // USD is toggled
    if ($var = "USD") {   

        if (localStorage.getItem("usdON") == "true") {  

            localStorage.setItem("usdON", false);

        } else {

            localStorage.setItem("usdON", true);    
        }
    };

    // EURO is toggled
    if ($var = "EURO") {   

        if (localStorage.getItem("euroON") == "true") {  

            localStorage.setItem("euroON", false);

        } else {

            localStorage.setItem("euroON", true);    
        }
    }

    // AUD is toggled
    if ($var = "AUD") {   

        if (localStorage.getItem("audON") == "true") {  

            localStorage.setItem("audON", false);

        } else {

            localStorage.setItem("audON", true);    
        }
    }

    // CAD is toggled
    if ($var = "CAD") {   

        if (localStorage.getItem("cadON") == "true") {  

            localStorage.setItem("cadON", false);

        } else {

            localStorage.setItem("cadON", true);    
        }
    }

    // YEN is toggled
    if ($var = "YEN") {   

        if (localStorage.getItem("yenON") == "true") {  

            localStorage.setItem("yenON", false);

        } else {

            localStorage.setItem("yenON", true);    
        }
    }
}

The problem I'm facing is that regardless of which toggle is pressed, it only changes the value for yen in local storage rather than the corresponding one. For example, toggleONOFF(GBP)

Answer №1

It seems like the addition of ; in the if-else statement may be causing the issue. Additionally, it is important to make sure your localStorage is properly initialized with a value or that you have a condition check before using it directly in an if-else statement.

if ($var = "GBP") {   
    if (localStorage.getItem("gbpON") == "true") {  
        localStorage.setItem("gbpON", false);
    } else {
        localStorage.setItem("gbpON", true);    
    }
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing dynamic components in Vuejs by passing props from objects

I have developed a dashboard application that allows users to customize their dashboard by adding widgets in any order. While the functionality is working fine, I am looking to address some technical debt and clean up the code. Let's simplify things ...

Verifying the timestamp of file submission in a form

My goal is to create an HTML form that allows users to send a file to my server, while also recording the exact time they initiated the file transfer. However, I'm facing an issue where only the time the file is received is being logged, rather than w ...

What is the best way to utilize the forEach method in React to manipulate a navigation element containing multiple links?

Here is the code I'm trying to convert: document.addEventListener("scroll", function() { const links = document.querySelectorAll(".nav-link"); for (const l of links) l.classList.toggle('scrolling', window.scrollY &g ...

Changing the InnerHTML of a tag in JavaScript using class and id attributes

When it comes to handling these links <div class="post_actions"> <a class="color-transition article_delete" href=""><i class="fa fa-pencil"></i></a> <a class="color-transition article_edit" href="#" id="1">< ...

I've been attempting to develop a React application, but I consistently encounter the following error: "npm ERR! cb() function was never invoked!"

Here is the issue at hand: HP@DESKTOP-1HP83V8 MINGW64 ~/Desktop/Web-Development (master) $ npx create-react-app my-app A new React app is being created in C:\Users\HP\Desktop\Web-Development\my-app. Packages are being installed. ...

The repeated execution of a Switch Statement

Once again, I find myself facing a puzzling problem... Despite making progress in my game, revisiting one aspect reveals a quirk. There's a check to verify if the player possesses potions, and if so, attempts to use it involves calculating whether the ...

Enhancing the performance of your code by optimizing it using jQuery when a checkbox is either checked or

Looking for ways to optimize a jquery function that toggles a URL parameter based on checkbox status. Any suggestions on how to streamline this code? $('#mapControl').live('click', function(){ var thisUrl = $(location).attr(' ...

I've been struggling with this javascript error for three days, how can I finally resolve it?

Currently developing a website using react js, but encountering an error every time I try to push to my github repository. Run npm run lint npm run lint shell: /bin/bash -e {0} <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail= ...

I'm facing a MongooseServerSelectionError: when trying to connect to 127.0.0.1:27017. Despite trying all the solutions provided on StackOverflow, the issue persists

MongooseServerSelectionError: Failed to connect to 127.0.0.1:27017 at NativeConnection.Connection.openUri (/mnt/d/Ecommerce/node_modules/mongoose/lib/connection.js:802:32) at /mnt/d/Ecommerce/node_modules/mongoose/lib/index.js:341:10 at ...

The assigned type does not match the type 'IntrinsicAttributes & { children?: ReactNode; }'. This property is not assignable

I have been struggling to resolve this issue, but unfortunately, I have not found a successful solution yet. The error message I am encountering is: Type '{ mailData: mailSendProps; }' is causing an issue as it is not compatible with type &apos ...

Running JavaScript within Electron is a straightforward process

Looking to create an Electron application that can take code entered into a text area, execute it, and display the result. Any advice on converting the text to JavaScript and running it? ...

What is the best way to display two columns in each row using Angular?

Can you please provide guidance on how to display two columns in each row using Angular? I am attempting to showcase only two columns per row, and if there are more than four items, I want to display them on an ion-slide. Further details will be provided. ...

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

I encountered an issue with a checkbox tree view where I needed to disable the first two checkboxes in selected mode. While I was able to achieve this using the checked and readonly properties, I found that I could still uncheck the checkboxes, which is no ...

How can I achieve a similar functionality to array_unique() using jQuery?

When I select values from a dropdown, they are stored as an array like ["1","2","3"] Upon each change, the code below is executed to generate a new array based on the selected values: $('#event-courses-type').on('change', function(){ ...

Automatically save user input in form fields with the help of jQuery and AJAX technology

I'm working on a form that has various input fields, and I need the data entered by the user to be automatically stored in the database every minute. After the user submits the request, it will be processed in a struts file where database interactions ...

Sharing data across multiple paths

route.post('/register',function(req,res){ //completed registration process // token value assigned as 'abc' }) route.post('/verify',function(req,res){ // How can I retrieve the token ('abc') here? }) I' ...

Exploring the distinction and connection between the $scope provided in a controller and the $scope provided in a directive

Can you explain the distinction and connection between the $scope utilized in a controller versus the $scope used in a directive? How is the setup process for each of these scopes different? Please elaborate. ...

"Exploring the capabilities of NODE JS Socket IO through request and response communication

I am currently utilizing node js and socket io in my website setup. I am encountering an issue where I need to establish a connection with the client on my website when the "client.on('Connexion', function(data) { }" is triggered. However, I am f ...

Verification upon button press for a form

Currently, I have a form with multiple textboxes that are being validated using the Required Field Validator. However, there is also a captcha control that is not getting validated. I can validate it using JavaScript though. At the moment, an alert pops u ...

Ways to send information to browser javascript from Spring MVC controller

Looking for the most efficient method to transfer data from Spring MVC to JavaScript. Let's say there is an array in JavaScript: var myArray = new Array(); And in the Java backend, there is another array: int[] myArray = new int[100]; What would ...