Encountering a TypeError when the 'on' event is triggered by 'byId' in Do

Currently, I am facing an issue with a module that includes a switch statement generating content and various on events waiting based on the content inserted into the DOM and the trigger activated.

The problem arises when using on event handlers with dom.byId('foo'):

on(dom.byId('foo'), touch.press, function(e){

This results in an error:

Uncaught TypeError: cannot read property 'on' of null
.

I suspect this occurs because the node foo may not exist if a different switch condition is met. To workaround this, I have started using a CSS class instead:

on(query('.foo'), touch.press, function(e){

However, this poses a similar risk as using the id!

As someone new to Dojo, learning its ins and outs has been quite a journey. I would like to understand why this error is happening and whether it indicates a significant problem on my end.

Answer №1

Without seeing the full code, it's difficult to provide a definitive answer. However, if you are looking to utilize query in your code, you can do so by following this approach:

require(["dojo/query"], function(query){
  query(".foo").on("click", clickHandler);
});

Considering the context of your specific project, if it pertains to mobile development, you might want to consider using "dojo/gesture/tap" as demonstrated in the following example from the documentation:

define(["dojo/on", "dojo/gesture/tap", function(listen, tap){
  on(button, tap, tapHandler);
...

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

The AJAX request is coming back with a readyState value of 1

Currently, I am working with Flask using Python. My goal is to return HTML table rows in an AJAX call from the Flask method. The HTML page contains: <div> <table id="tableQuestions"> </table> //AJAX Requests to get function l ...

Using GraphQL to set default values in data within a useEffect hook can lead to never

Here's the code snippet that I'm working with: const [localState, setLocalState] = useState<StateType[]>([]); const { data = { attribute: [] }, loading } = useQuery<DataType>(QUERY, { variables: { id: client && client.id ...

Exploring the possibilities of developing WebComponents within Angular using TypeScript

My Angular application was originally created using the default method with ng new project-name". However, for performance reasons, I had to incorporate single standard WebComponents. The JavaScript code associated with these components is stored in a ...

The challenge with Three.js CTM loader: Developing a separate .js file to reference the .ctm file

When using the CTM loader function, I was able to successfully create a .ctm file for the object, but I am having difficulty creating a .js reference file for it in the same way that the three.js example file does. If anyone can provide guidance on this ...

Guide on programmatically concealing a Bootstrap Offcanvas element using JavaScript and Blazor

In my Blazor .Net 8 web application, I have implemented a Bootstrap 5.3 Offcanvas component as a menu for selecting items. I wanted the Offcanvas to close automatically when a user selects an item from the menu. To achieve this functionality, I created a ...

Can Node.js be executed using Bash commands on a Windows operating system?

Exploring Node.js has been my latest endeavor. Upon downloading Node.js for Windows, I found myself faced with the command prompt version tailored for Windows. This got me thinking - is there a way to set up a UNIX environment for Node.js on a Windows syst ...

Vue - The compilation process encountered an error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): SyntaxError: An unexpected token was found (13:1080)

When attempting to run the command "cross-env NODE_ENV=development nodemon ./server.js", I encountered the following error: ModuleBuildError: Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected to ...

Could you explain the process of utilizing $.each to showcase various nested elements within the same JSON object?

I am currently working on utilizing the Trello API in order to develop a user stories and checklist items dashboard for a client. Below is the code snippet that pertains to this project: Trello.get("boards/z6yBuVol/cards", function(cards) { $cards ...

What is the procedure to obtain a session object on the server side in next.js version 14?

I am currently utilizing version 14 of next.js with its app routing feature and NextAuth. My goal is to secure the API, however, I encounter a null object when using the getServerSession( authOptions ) method while attempting to access a protected endpoin ...

Getting undefined while trying to iterate through data on a next js page using getStaticProps. What could be causing this issue?

Encountering difficulties while trying to output the page meta data in next.js when I execute: npm run build An error is thrown with the following message: Error occurred prerendering page "/blog/[...slug]". Read more: https://err.sh/next.js/pre ...

Sending specific names as properties

Looking to streamline my repetitive form inputs by abstracting them into a component, I want the following functionality: <InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType"> The desired output wo ...

Performing a recursive loop through numerous web pages while utilizing selenium for scraping purposes

This is a follow up inquiry to my previous question about web scraping. If you missed it, you can view it here Now, I'm looking to do the same process recursively across multiple pages/views. Take a look at my code snippet: from selenium.webdriver ...

"electron-builder - initially designated for building app for Mac only, but now configured to build for both Mac

This is my first attempt at creating an electronjs app, so I may not have a full grasp on what I'm doing. I've been following the instructions on GitHub and also this guide from Medium. Here's a snippet of my package.json: { (package.jso ...

Location of the webpage determined by the specific value

I need help with a specific request. I am looking to make some modifications to this form by adding two fields - one for "male" and one for "female" - each assigned to their respective URLs. For example, selecting the "female" option should redirect to " ...

What patterns drive UI behavior based on the type of content?

My web page is designed for editing various types of products, each with different behaviors depending on their product type. The variations in behavior include minor changes such as: a specific field being mandatory only for one product type, a dropdown ...

Obtain a collection of custom objects through an HTTP GET request to be utilized in an Angular 2 application

I am currently grappling with the task of efficiently retrieving a list of custom objects and displaying their contents using an HTML file. Here is a simplified version of the HTTP GET method that I am working with: [HttpGet("/atr/testing")] public List& ...

Tips for maintaining video height consistency while adjusting its attributes

When you click on a button, the video's poster and src attributes change. However, after clicking, the video height briefly becomes 0, causing an unsightly effect on the entire page. How can this be avoided? Please note - lorem.mp4 and ipsum.mp4 hav ...

"Utilizing the power of ng-click to target specific child

I am facing an issue with my owl carousel where events are not firing on cloned items. In search of a solution, I came across a suggestion from Stack Overflow to move the event handler from the direct target to its parent element: Original code snippet: ...

How can I extract the return value of a JSON object and store it in a variable?

I am attempting to develop a dynamic chart by utilizing data retrieved from a function housed inside a JSON object. The JSON object is fetched through the Relayr Javascript API, and looks like this: relayr.devices().getDeviceData({ token: tok ...

Is there a way to access the edit section without having to reload the page for every post in Django using Javascript?

This snippet represents my HTML template: <div class="posts"> <h3> <a href ="{% url 'profile' p.user.id %}"> {{p.user}}: </a> </h3> <p>{{p.timestamp}}</p> <br> <p>< ...