What is the process for dynamically altering the method in a class?

Is there a way to dynamically modify the changeThis method by substituting it with the value of a radio element? For example, if I select event1, the method should be switched to Class.event1()

<input 
       type="radio"
       class="radio-input"
       id="1"
       value="event1"
       ng-model="$ctrl.eventType"
       ng-change="$ctrl.updateEvent()" />

JavaScript:

updateEvent() {
 const getEvent = Class.changeThis({
    title: 'Happy Time',
    location: 'New York, NY',
    description: 'Let\'s go!'
 });
}

I attempted this approach:

const getEvent = Class + '.'+ this.eventType({ 
     title: 'Happy Time',
     location: 'New York, NY',
     description: 'Let\'s go!'
  });
}

Nevertheless, it resulted in the error message eventType is not a function. Even when transformed into a function, the solution still did not work as intended.

Answer №1

To dynamically access an object's property or method, you can use the following syntax:

myObj["my" + "property"]

In your specific scenario, it would look like this:

Class[this.eventType]({ ... });

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

Tips for assigning a personalized value to an MUI Switch when it is in the off position

I am currently utilizing the MUI Switch component to create an On-Off button. I have manually set the value as "on" and it is functioning correctly when the switch is in the true state. However, there doesn't seem to be an option to change the default ...

What is the best way to encapsulate multiple Bluebird promises within a single promise?

Seeking assistance in creating an async wrapper for a redis query supported by a db query. If the redis query fails, I want to execute the db query instead. When the db query is successful, I aim to store the returned data in redis before sending it back. ...

Is there a way to modify the color scheme of the hamburger icon

I'm experiencing difficulties changing the color of a hamburger icon. I've searched for the specific code responsible for the color change, but I haven't been able to locate it. Ideally, I want the color to be white, but on small screens, i ...

Tips for assigning a class to an Angular accordion header when the panel is in the open state

I am currently utilizing the Angular UI Bootstrap accordion feature, which can be found here. <div ng-controller="AccordionDemoCtrl"> <div accordion close-others="oneAtATime"> <div accordion-group heading ...

Tips for refreshing an html table without affecting the scroll location?

HTML: <div class="html_table"></div> # Within the html body tag. Utilizing Ajax function to retrieve table data. var $html_table= $('.html_table'); function ajaxCallFunction() { $.ajax({ type: 'POST', ...

Tips for identifying when a date has been chosen in Angular Bootstrap datepicker

Currently, I have implemented the datepicker directive from Angular Bootstrap in the following manner: <datepicker ng-model="period_start" show-weeks="false" class="bs-dateselector"></datepicker> I am looking for a way to identify when a user ...

What is the best way to generate a new div element when the content exceeds the preset height of the current div?

CSS .page{ width: 275px; hight: 380px; overflow: auto; } HTML <div class="page">dynamic text</div> Is there a way to automatically create new div elements when dynamic text overflows past the fixed height of the init ...

Unique Revision: "Identification Zone within a Single-page Application"

Seeking insights from a seasoned DOM/JS Architect. In reference to another discussion about maintaining a clean id space in a Single Page Application (SPA). Due to certain restrictions, I am unable to utilize data binding frameworks and have to work with ...

What is the best way to link the :style attribute with object syntax and incorporate multiple background images?

I'm experiencing an issue trying to bind CSS style with the object syntax to an image. The style object includes the CSS property background which refers to multiple background images, but unfortunately, these images are not showing up. Template < ...

What are the differences between using the open prop and conditionally rendering a Material-UI Modal component?

Is there a difference in using the open prop or conditionally rendering Material-UI's Modal component and its built components? The closing transition may be lost, but are there any performance advantages when dealing with multiple Modals? Example wi ...

Enhance click functionality on list item content using knockoutjs

Check out my app on GitHub or view it live at this link. I'm trying to implement a feature where clicking on each item, like "Bookworm Buddy," will toggle its description within the project. Here's what I've attempted so far: function AppV ...

Expanding the use of tagged template literals for passing additional arguments

Currently, I am utilizing styled-components and creating components through their tagged template literal syntax like this: const Button = styled.button` background-color: papayawhip; border-radius: 3px; color: palevioletred; ` In a specific scenar ...

"What is the best way to ensure that a random array value is printed accurately within an If/Else statement in my Text Adventure

I am currently developing a text-based adventure game where the output in the console log is determined by specific input. The goal is for a message to appear if a goblin inflicts enough attack damage to reduce the player's defense to below 0, stating ...

Attempting to utilize express-load in conjunction with express 4

As a beginner in NodeJS, I encountered a problem with my code. Let me show you the issue. I am trying to load the application in the MVC pattern using express-load, but I am facing an error when defining the load order. Here is the important part of app. ...

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

Issues arise when the Slick functionality fails to load following an ajax request

I've come across a situation similar to the one on this post. I'm having trouble getting my slick carousel to work after a successful ajax call. Despite trying all the solutions provided, it's still not functioning as expected. The code for ...

Updating the customer's billing address in Stripe without modifying their payment card details

Can I update a customer's stored address on Stripe without updating their card information as well? Currently, when customers update their info, they are required to enter their card details even for minor changes like the city. Is there a way to only ...

The module "jquery" in jspm, jQuery, TypeScript does not have a default export

Having some trouble setting up a web app with TypeScript and jspm & system.js for module loading. Progress is slow. After installing jspm and adding jQuery: jspm install jquery And the initial setup: <script src="jspm_packages/system.js"></scri ...

Unable to transfer HTML code into the TinyMCE editor

I've successfully stored raw HTML content in my database, and now I want to display it in my TinyMCE editor for users to easily edit and submit. Below is the form: <textarea id="postfullOnEditPop" type="text" class="validate" placeholder="Enter f ...

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

How can I prevent my ul.SideNav_Main li a:focus class from losing focus when I click on the iframe or elsewhere on the page? Shouldn't it maintain focus until I click on another URL in the list? Is it possible to solve this issue with just CSS, or wo ...