Ways to recycle code with similar functionality but varying variable names

Question

Ways to recycle code with similar functionality but varying variable names

I have 3 buttons that copy content from a text area. All three functions are the same, only the variable name changes. How can I combine these into a single function instead of having three separate ones?

<div class="divclip">
    <button
      type="button"
      class="btn btn-light btn-sm"
      (click)="copyInputMessage(userinputAscii, 'toogleCopyBtnAscii')"
      id="copyBtnOne">
      {{ toogleCopyBtnAscii ? "Copy" : "Copied" }}
    </button>
</div>
 <div class="divclip">
    <button
      type="button"
      class="btn btn-light btn-sm"
      (click)="copyInputMessage(userinputHex, 'toogleCopyBtnHex')"
      id="copyBtnTwo"
    >
      {{ toogleCopyBtnHex ? "Copy" : "Copied" }}
    </button>
  </div>
  <div class="divclip">
    <button
      type="button"
      class="btn btn-light btn-sm"
      (click)="copyInputMessage(userinputBinary, 'toogleCopyBtnBinary')"
      id="copyBtnThree"
    >
      {{ toogleCopyBtnBinary ? "Copy" : "Copied" }}
    </button>
  </div>

This is the component.ts code

  
  copyInputMessage(inputElement, toggleVariable) {
    this[toggleVariable] = !this[toggleVariable];
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

javascript angular typescript

Answer 1

Answer №1

Each function shares the same final three lines. To streamline the code, consider creating a new function:

  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }
  copyInputMessageAscii(inputElement) {
    this.toogleCopyBtnAscii = !this.toogleCopyBtnAscii;
    copyInputMessage(inputElement);
  }

  copyInputMessageHex(inputElement) {
    this.toogleCopyBtnHex = !this.toogleCopyBtnHex;
    copyInputMessage(inputElement);
  }

  copyInputMessageBinary(inputElement) {
    this.toogleCopyBtnBinary = !this.toogleCopyBtnBinary;
    copyInputMessage(inputElement);
  }

Alternatively, you can simplify it further by using:

  copyInputMessage(inputElement,charType) {
    switch(charType) {
      case "hex":
        this.toogleCopyBtnHex = !this.toogleCopyBtnHex;
        break;
      case "binary":
        this.toogleCopyBtnBinary = !this.toogleCopyBtnBinary;
        break;
      default: // assume "ascii"
        this.toogleCopyBtnAscii = !this.toogleCopyBtnAscii;
        break;
    }
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Answer 2

Each function shares the same final three lines. To streamline the code, consider creating a new function:

  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }
  copyInputMessageAscii(inputElement) {
    this.toogleCopyBtnAscii = !this.toogleCopyBtnAscii;
    copyInputMessage(inputElement);
  }

  copyInputMessageHex(inputElement) {
    this.toogleCopyBtnHex = !this.toogleCopyBtnHex;
    copyInputMessage(inputElement);
  }

  copyInputMessageBinary(inputElement) {
    this.toogleCopyBtnBinary = !this.toogleCopyBtnBinary;
    copyInputMessage(inputElement);
  }

Alternatively, you can simplify it further by using:

  copyInputMessage(inputElement,charType) {
    switch(charType) {
      case "hex":
        this.toogleCopyBtnHex = !this.toogleCopyBtnHex;
        break;
      case "binary":
        this.toogleCopyBtnBinary = !this.toogleCopyBtnBinary;
        break;
      default: // assume "ascii"
        this.toogleCopyBtnAscii = !this.toogleCopyBtnAscii;
        break;
    }
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Answer 3

Answer №2

Here is a more efficient way to handle copying input messages in different formats:

//Reusable function

copyInputMessage(inputElement, inputType) {
        if(inputType === 'binary') {
            this.toogleCopyBtnBinary = !this.toogleCopyBtnBinary;
        }
        if(inputType === 'hex') {
            this.toogleCopyBtnHex = !this.toogleCopyBtnHex;
        }
        if(inputType === 'ascii') {
           this.toogleCopyBtnAscii = !this.toogleCopyBtnAscii;
        }
        this.toogleCopyBtnBinary = !this.toogleCopyBtnBinary;
        inputElement.select();
        document.execCommand('copy');
        inputElement.setSelectionRange(0, 0);
      }

// calling function

copyInputMessageAscii(userinputAscii, 'binary');
copyInputMessageAscii(userinputAscii, 'hex');
copyInputMessageAscii(userinputAscii, 'ascii');

Answer 4

Here is a more efficient way to handle copying input messages in different formats:

//Reusable function

copyInputMessage(inputElement, inputType) {
        if(inputType === 'binary') {
            this.toogleCopyBtnBinary = !this.toogleCopyBtnBinary;
        }
        if(inputType === 'hex') {
            this.toogleCopyBtnHex = !this.toogleCopyBtnHex;
        }
        if(inputType === 'ascii') {
           this.toogleCopyBtnAscii = !this.toogleCopyBtnAscii;
        }
        this.toogleCopyBtnBinary = !this.toogleCopyBtnBinary;
        inputElement.select();
        document.execCommand('copy');
        inputElement.setSelectionRange(0, 0);
      }

// calling function

copyInputMessageAscii(userinputAscii, 'binary');
copyInputMessageAscii(userinputAscii, 'hex');
copyInputMessageAscii(userinputAscii, 'ascii');

Answer 5

Answer №3

To implement different behaviors based on the type parameter, you can utilize a switch case statement within the shared function.

  processInput(type) {
    switch (type) {
      case 'Text':
        this.toggleTextBehavior = !this.toggleTextBehavior;
        break;
      case 'Number':
        this.toggleNumberBehavior = !this.toggleNumberBehavior;
        break;
      case 'Boolean':
        this.toggleBooleanBehavior = !this.toggleBooleanBehavior;
        break;
    }
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Answer 6

To implement different behaviors based on the type parameter, you can utilize a switch case statement within the shared function.

  processInput(type) {
    switch (type) {
      case 'Text':
        this.toggleTextBehavior = !this.toggleTextBehavior;
        break;
      case 'Number':
        this.toggleNumberBehavior = !this.toggleNumberBehavior;
        break;
      case 'Boolean':
        this.toggleBooleanBehavior = !this.toggleBooleanBehavior;
        break;
    }
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Answer 7

Answer №4

Consider utilizing arrays to keep track of user actions, inputs, and buttons. Below is a sample code demonstrating how you can approach the issue using arrays

In your TypeScript file

userInputs = ['Ascii', 'Hex', 'Binary'];
toogleCopyBtn = this.userInputs.reduce((prev, next) => ({prev, [next]: false}), {})
copyInputMessage(userInput) {
  this.toogleCopyBtn[userInput] = !this.toogleCopyBtn[userInput];
  const inputElement = document.querySelector('#inputElement' + userInput) as HTMLInputElement
  inputElement.select();
  document.execCommand('copy');
  inputElement.setSelectionRange(0, 0);
}

In your HTML

<div *ngFor='let userInput of userInputs; let index = index' class="divclip">
  <button
    type="button"
    class="btn btn-light btn-sm"
    (click)="copyInputMessage(userInput)"
    [attr.id]="'copyBtn' + userInput">
    {{ toogleCopyBtn[userInput] ? "Copy" : "Copied" }}
  </button>
</div>

<input *ngFor='let userInput of userInputs' type="text" [attr.id]='"inputElement" + userInput'>

Check out a live demo here

Answer 8

Consider utilizing arrays to keep track of user actions, inputs, and buttons. Below is a sample code demonstrating how you can approach the issue using arrays

In your TypeScript file

userInputs = ['Ascii', 'Hex', 'Binary'];
toogleCopyBtn = this.userInputs.reduce((prev, next) => ({prev, [next]: false}), {})
copyInputMessage(userInput) {
  this.toogleCopyBtn[userInput] = !this.toogleCopyBtn[userInput];
  const inputElement = document.querySelector('#inputElement' + userInput) as HTMLInputElement
  inputElement.select();
  document.execCommand('copy');
  inputElement.setSelectionRange(0, 0);
}

In your HTML

<div *ngFor='let userInput of userInputs; let index = index' class="divclip">
  <button
    type="button"
    class="btn btn-light btn-sm"
    (click)="copyInputMessage(userInput)"
    [attr.id]="'copyBtn' + userInput">
    {{ toogleCopyBtn[userInput] ? "Copy" : "Copied" }}
  </button>
</div>

<input *ngFor='let userInput of userInputs' type="text" [attr.id]='"inputElement" + userInput'>

Check out a live demo here

Ways to recycle code with similar functionality but varying variable names

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I'm having trouble getting jQuery to work properly with Bootstrap buttons

I'm completely unsure of how to properly test this using Qunit

How to temporarily modify/add CSS class in Angular 2

My custom function is not invoking the Firebase function createUserWithEmailAndPassword

Combining 2 dates into a single cell format

Edge browser saves your most recent PDF viewing preferences

Tips for arranging Intervals in sequence?

Group by month and calculate the total sum using mongoose in MongoDB

Is now the ideal moment to implement Angular 4?

Tips for effectively wrapping Material UI v5 component to ensure the Grow component functions correctly

What is the best way to achieve the functionality of this ajax jquery using vanilla JavaScript?

Exploring the Concept of Nested ViewModels in Knockout.js Version 3.2.0

Create and save data to a local file using Angular service

Accessing a td element using an external JavaScript file

Handling the onClear event in a Primeng Calendar

Navigate back to the previous page following the completion of an AJAX data submission

Creating a series of tiny vertical markings along the horizontal line using the input range

Error: npm ran out of memory and could not complete the read operation

When utilizing a property on "this" within a function defined in a constructor, the compiled JavaScript code produces an undefined result

Accept only the keys specifically assigned to an object