Ways to execute a function inside a div or custom tag attribute

Looking for guidance on calling a function within a custom tag:

<t-dropdown name='Name' callback="testFn">
    </t-dropdown>

<script>
  function testFn(value){
    console.log(value);
  }
</script>

In JavaScript:

var callbackFn = document.getElementsByTagName("t-dropdown")[0].getAttribute("callback");
var abc = 10;
callbackFn(abc);

Open to suggestions on the best approach.

Answer №1

let callbackFunction = window[document.querySelectorAll("custom-select")[0].getAttribute("callback")];
let number = 12;

if(typeof callbackFunction === 'function') {
    callbackFunction(number);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<custom-select name='Selection' callback="testFunction">
    </custom-select>
<script>
  function testFunction(value){
    console.log(value);
  }
</script>

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

With the power of jQuery, easily target and retrieve all label elements within a specified

Currently, I'm working on developing a function that should be executed whenever any of the labels for a particular group of radio buttons are clicked. So, I need a way to reference all the labels in this radio button group. In my search for a soluti ...

Has anyone else encountered the issue where the JavaScript for Bootstrap version 4.3.1 is malfunctioning on Firefox version 65.0.1?

While browsing through the bootstrap v 4.3.1 documentation on firefox v 65.0.1, I noticed an issue with the javascript not functioning properly. For instance, the carousel component is not progressing to the next slide with its transition animation as it s ...

When using React, the auto-fill suggestions in forms are not displayed

Looking to enhance a React panel for adding new products, I've developed a separate auto-complete class. This special class should display an input field along with a list of suggested autofill items below. However, it seems that only the input elemen ...

Having trouble retrieving JavaScript data sent via AJAX using the Playframework2 DynamicForm object. encountering an error: `{data[undefined]=}`

When I send a Javascript array via Ajax using the POST method like this: $.post(assignmentsubmitAddress, submittedUnitsArray, I receive a Status OK response. However, when I try to retrieve that data on the server using the Play Framework 2 Dynamic form ...

The node.js tutorial hit a snag due to the absence of the bson module

A Little Background I'm currently working on following a tutorial that can be found here. This tutorial involves setting up a restful web app using Node, Express, and MongoDB. My MongoDB database is up and running on another Linux machine, and I kno ...

Unable to locate the value of the query string

I need help finding the query string value for the URL www.example.com/product?id=23 This is the code I am using: let myApp = angular.module('myApp', []); myApp.controller('test', ['$scope', '$location', '$ ...

Combining the power of Kendo UI with the flexibility of Vue

Hey there everyone, I'm currently utilizing the Vue.js CLI for my project. Recently, I came across a helpful tutorial on incorporating a Jquery plugin into a webpack project at this link: . To achieve this, I installed the expose loader and added th ...

Is it possible to execute JavaScript in VSCode without the need for Node.js?

Is there a way to run JavaScript in VSCode using a school-issued laptop that does not allow the download of Node.js? I have searched for alternatives, but most tutorials recommend downloading Node.js. ...

In Protractor, mastering the technique to extract multiple values simultaneously is crucial for efficiently handling applications that receive a large amount of push notifications

I am currently developing an automation test using Protractor for an application that receives a large volume of push notifications. The issue I am facing is testing a simple logic. expect(A + B).toEqual(C); The problem arises because A, B, and C are sou ...

What is the best way to access the data stored within a Promise object in a React application?

Below is the snippet of my code that handles parsing application data: async function parseApplication(data: Application) { const fieldGroupValues = {}; for (const group of Object.keys(data.mappedFieldGroupValues)) { const groupValue = data.mappedF ...

transition from jQuery to Zepto

I have been utilizing multiple jQuery plugins in my codebase... Recently, I decided to switch over to Zepto, but encountered an issue Uncaught TypeError: Object function (a,b){return A.init(a,b)} has no method 'data' when checking the console ...

angular directive add unique key to DOM element

When I am looping through DOM elements of an Angular component with ngFor, it looks like this: <td> <button class="dropdown-item" [id]="compte_ingroup" href="#"> action </button> </td> My question is: how ca ...

Authentication with AngularJS and Java, managing $scope

My current system setup includes: front-end = AngularJS back-end = Java EE7/REST-API Both applications are operating on Wildfly 8.2 using Undertow as the application server. One of my main concerns is about the authentication process: Should I impl ...

Implementing React router for dynamic page rendering

I'm struggling to make sense of a particular piece of code. Can someone provide an explanation? I'm particularly confused about the role of "props" in this section and how it is essential for the code to work correctly. If I remove "props," my co ...

What is the process of calculating the average of JSON data and looping through it multiple times using Javascript?

I've encountered a JSON data set that has the following structure: { name: "Evelyn", assignment: "SCRUM", difficulty: 3, fun: 4 } And so on. My goal is to calculate the average value of both difficulty and fun for e ...

How can we identify if the user is utilizing a text-input control?

Incorporating keyboard shortcuts into my HTML + GWT application is a goal of mine, but I am hesitant about triggering actions when users are typing in a text area or utilizing the keyboard for select menu operations. I am curious if there exists a method ...

``As I navigate through my react native app, I encounter the challenge of receiving the BackHandler

I've been developing a chat app and I'm trying to implement a feature where, upon clicking the default back button on Android, it both closes the keyboard and navigates back. Although I know how to capture the keyboard close event, I currently h ...

The Angular scope remains static during service calculations and does not reflect immediate updates

Is there a way to display a message on the scope indicating that a function in a service is currently being calculated and taking a long time? I have set up a simplified example in this jsfiddle: http://jsfiddle.net/rikboeykens/brwfw3g9/ var app = angul ...

React error: Updating state is only allowed on mounted or mounting components

I'm encountering this Error/Warning message in my console: The error message says: setState(...): Can only update a mounted or mounting component. Addressing the Component Mounting Process When it comes to mounting the component, here's the r ...

Challenges with saving a segment of an AJAX GET response (in JSON) as a string variable

I am facing an issue while attempting to save a section of the result obtained from a GET request through AJAX into a string variable. Essentially, my goal was to ensure that a specific function containing a GET request operation can return the outcome of ...