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

Retrieve a specific column value upon button click in HTML and JavaScript

I am faced with a table containing multiple columns, each row equipped with an edit button. Upon clicking the edit button, a modal view pops up where users can input values that are then sent via AJAX to my controller. The challenge I'm encountering ...

Update JSON values using JavaScript or jQuery

In the code snippet provided, there is an issue where nameElem.data('index') does not change, causing it to always display element 1 in the list. I attempted to change the json value with cardInfo[i].data.index = index;, but that did not solve th ...

By pressing the "showMore" button, the page dynamically pulls in a json list from a file

Currently, my focus is on a dropwizard-Java project. My task involves retrieving and showcasing the first 10 items from a json list in a mustache view. If the user clicks on the "show more" link, I should retrieve the next 10 elements from the list and d ...

Can a File Object be transmitted to an AWS Lambda function via API Gateway using JavaScript?

Can a JavaScript File Object be passed from a browser to AWS Lambda via API Gateway (ultimately to S3)? I am working with TypeScript and React. Environment Frontend TypeScript React AWS Amplify (for API module) Backend(AWS Lambda) Node.js Expecta ...

Navigating through Sails.Js: A Guide to Implementing Pagination

Looking to implement paginated tables in your application using sails.js, mongodb, and waterline-ORM? Wondering if there is a recommended method for pagination in sails.js? ...

Terminate the rethinkdb data stream

Currently delving into the world of RethinkDB and am eager to utilize the changes() method to fetch a changefeed. While I've figured out how to initiate them, the documentation doesn't quite explain how to halt a changefeed. Is it sufficient to ...

Is it universally compatible to incorporate custom attributes through jquery metadata plugin in all web browsers?

Picture this: a fictional markup that showcases a collection of books with unique attributes, utilizing the metadata plugin from here. <div> Haruki Murakami </div> <div> <ul> <li><span id="book5" data="{year: 2011} ...

Trouble getting Fontawesome icons to accept color props when using react functional components with tailwindcss

Issue I'm Facing I'm currently working on a project that involves using icons extensively. Instead of manually adding a Fontawesome icon in every script, I have created a functional component that handles the rendering of icons based on given pr ...

Inject HTML entities, escaped for CSS, dynamically using JavaScript

My goal is to dynamically generate a list of HTMLElements with unique data-* attributes that correspond to various HTML Entities. These attributes will then be utilized by CSS to display content in pseudo elements like this: li:after { content: attr(dat ...

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav. While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an ac ...

I am experiencing an issue where the custom form validation directive in AngularJS is not functioning properly within my modal

To enhance the validation of my input boxes, I created a custom directive called nx-validate. This directive is designed to be added to a bootstrap div.form-group, which will then check if the <input/> field is $dirty or $invalid, and apply the appro ...

Executing window.open from Html.Actionlink in ASP.NET MVC 4

Here is the code block I am working with: @foreach (System.Data.DataRow drEquipment in Model.EquipmentList.Rows) { <tr> <td valign="top">@drEquipment["ColumnName"]<br /></td> <td valign="to ...

What causes variations in the output of getClientRects() for identical code snippets?

Here is the code snippet provided. If you click on "Run code snippet" button, you will see the output: 1 - p.getClientRects().length 2 - span.getClientRects().length However, if you expand the snippet first and then run it, you will notice a slight dif ...

Creating responsive HTML page text and table with the use of JavaScript

Trying to create a responsive webpage has been a bit challenging. I experimented with height,style.height, style.OffsetHeight, etc. but still struggling to dynamically make a square table. Although the code below changes the height, the table's width ...

Navigating with Reach Router only updates the URL, not the component being rendered

Is there a way to programmatically navigate using Reach Router in React? I have noticed that when updating the URL, the route does not render. Even though the URL changes, the original component remains displayed according to the React developer tools. Ho ...

"Concealing tooltip boxes in Vue: A step-by-step guide

I am trying to achieve a functionality where a tooltip box appears on each incorrect or empty input field when the 'Save' button is pressed. I have been able to display the tooltip boxes upon clicking the 'Save' button, but the issue ar ...

Error: Angular JS Service is undefined

I'm currently working on creating an array in my application that is universally accessible through services. Additionally, I have implemented ui-router in my application. In the app.js file, I define the service like this: myFamilyApp.service(&apos ...

The Material UI theme of a React component is not locally scoped within the Shadow DOM

Introduction I have embarked on a project to develop a Chrome Extension that utilizes a React component through the Content script. The React component I am working with is a toolbar equipped with various sub-tools for users to interact with while browsin ...

Identify the fields in the form that have been edited for easier reference

Seeking guidance on creating a form with interactive input box fields. When a user inputs something, the field highlights in orange. Moving to another field removes the highlight and focuses the new box. Clicking "save" stores the form data. Pressing "mo ...

When working with an outdated package, you may encounter a situation where babelHelpers is not

My current focus is on a vuetify v1.5 project. Unfortunately, one of the dependency packages (d3-flextree) is causing an issue with the 'babelHelpers is not defined' error. The solution I came across suggests using transform-runtime instead of th ...