switching the content of a button when it is clicked

Question

switching the content of a button when it is clicked

I am currently using Angular 7 and I am trying to achieve a functionality where the text on a button changes every time it is clicked, toggling between 'login' and 'logout'.

Below is the code snippet I have been working on:

typescript file:

export class HeaderComponent implements OnInit {

  text: string;

  constructor() {
    this.loadDataFromApi();
  }

  ngOnInit() {
      if (this.token == null) {
        this.text = 'login';
        alert(this.text);

      } else if (this.token) {
         this.token = 'logout';
         alert(this.text);
      }
   }

}

An alert saying undefined is being displayed

html file:

 <button type="button"> {{text}}</button>

javascript angular typescript angular7

Answer 1

Answer №1

It appears that you are using a Comparison Operator (==) instead of the assignment operator (=). Make sure to correct this for your code to function properly. Here is an example of how it should be:

export class HeaderComponent implements OnInit {

  text: any;

  constructor() {}

  ngOnInit() {
    this.loadDataFromApi();
    if (this.token) {
      this.text = 'logout';
      alert(this.text);
    } else {
      this.text = 'login';
      alert(this.text);
    }
  }
}

Note: It is likely that this.loadDataFromApi is an asynchronous function, which means that the code after this call will continue executing without waiting for it to finish. This could result in unexpected behavior, with the alert displaying "login" in most cases.

Answer 2

It appears that you are using a Comparison Operator (==) instead of the assignment operator (=). Make sure to correct this for your code to function properly. Here is an example of how it should be:

export class HeaderComponent implements OnInit {

  text: any;

  constructor() {}

  ngOnInit() {
    this.loadDataFromApi();
    if (this.token) {
      this.text = 'logout';
      alert(this.text);
    } else {
      this.text = 'login';
      alert(this.text);
    }
  }
}

Note: It is likely that this.loadDataFromApi is an asynchronous function, which means that the code after this call will continue executing without waiting for it to finish. This could result in unexpected behavior, with the alert displaying "login" in most cases.

Answer 3

Answer №2

It is recommended to utilize the assignment operator '=' instead of the comparison operator '=='

this.text ='log in';

 export class HeaderComponent implements OnInit {

    text: any;
    constructor( );

        this.fetchDataFromAPI();
      }
    ngOnInit() {

        if(this.token == null){
          this.text ='login';
          alert(this.text);

        } else if (this.token){
          this.token = 'logout';
          alert(this.text);

        }
    }

Answer 4

It is recommended to utilize the assignment operator '=' instead of the comparison operator '=='

this.text ='log in';

 export class HeaderComponent implements OnInit {

    text: any;
    constructor( );

        this.fetchDataFromAPI();
      }
    ngOnInit() {

        if(this.token == null){
          this.text ='login';
          alert(this.text);

        } else if (this.token){
          this.token = 'logout';
          alert(this.text);

        }
    }

Answer 5

Answer №3

Instead of using this.token == null, try using !this.token which checks for both undefined and null values (and is considered the recommended approach).


if(!this.token){
     this.text = 'login';
     alert(this.text);

} else if (this.token){
     this.text== 'logout';
     alert(this.text);
}

Answer 6

Instead of using this.token == null, try using !this.token which checks for both undefined and null values (and is considered the recommended approach).


if(!this.token){
     this.text = 'login';
     alert(this.text);

} else if (this.token){
     this.text== 'logout';
     alert(this.text);
}

Answer 7

Answer №4

Following the else statement, you are updating the value of this.token instead of this.text.

In addition, it is important to remember to use = for assignment, not ==. Here is how you can modify your code:

ngOnInit() {
    if (this.token === null) {
        this.text = 'login';
        alert(this.text);

    } else if (this.token) {
        this.text = 'logout';
        alert(this.text);
    }
}

Note: Have you defined the variable token in your .ts file? It seems to be missing from your provided code.

Answer 8

Following the else statement, you are updating the value of this.token instead of this.text.

In addition, it is important to remember to use = for assignment, not ==. Here is how you can modify your code:

ngOnInit() {
    if (this.token === null) {
        this.text = 'login';
        alert(this.text);

    } else if (this.token) {
        this.text = 'logout';
        alert(this.text);
    }
}

Note: Have you defined the variable token in your .ts file? It seems to be missing from your provided code.

Answer 9

Answer №5

Essentially, the condition being checked is for the presence of an authorization token; if it exists, the text displays as "logout," otherwise it shows "login."

In your scenario, it appears that this.token is initially undefined.

This is why the alert message indicates undefined.

The current set of conditions will not function properly.

A proper implementation would be:

if (this.token) {//If user is logged in, display 'logout'
    this.text = 'logout';
    alert(this.text);

  } else {//If user is logged out, display 'login'
     this.token == 'logout';
     alert(this.text);
  }

Prior to implementing, ensure you check whether this.token has a value assigned or not.

Answer 10

Essentially, the condition being checked is for the presence of an authorization token; if it exists, the text displays as "logout," otherwise it shows "login."

In your scenario, it appears that this.token is initially undefined.

This is why the alert message indicates undefined.

The current set of conditions will not function properly.

A proper implementation would be:

if (this.token) {//If user is logged in, display 'logout'
    this.text = 'logout';
    alert(this.text);

  } else {//If user is logged out, display 'login'
     this.token == 'logout';
     alert(this.text);
  }

Prior to implementing, ensure you check whether this.token has a value assigned or not.

switching the content of a button when it is clicked

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Setting up a personalized configuration entry in environment.js

Some sections of the HTML form are failing to load

Issue with VUE JS: Score not increasing on click event as desired

The problem arises when trying to use the Jquery click event on buttons that have been generated

When using React, the page loads and triggers all onClick events simultaneously, but when clicking on a button, no action is taken

Using conditional statements to render content based on a certain condition within a

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

"Step-by-step guide on setting up Angularjs ng-model in a Rails environment

Switching Between HTML Using Javascript

Avoid triggering the onClick event on multiple submit buttons when the form data is deemed invalid by vee-validate

Hello, I'm looking for assistance with this ReactJS code. Is there anyone who can help me

Issue with Nextjs environmental variables not functioning in JavaScript pages

What is the best way to verify a field against a set of string values using Typescript in a NestJS application

Encountering a "Missing Access" error on the Discord.js API when trying to register my slash commands

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Rule in ESLint mandating return type for arrow functions

The feature module does not have visibility of the Behavioral Subject Value during lazy loading

My JavaScript if-else statement isn't functioning properly

Updating React state via child components

Using either Javascript or jQuery, I want to set a value within an if statement