Determine whether an element possesses a particular identifier

I'm currently using Vue.js for drag and drop functionality, specifically utilizing evt.to and evt.from to determine if I am dragging an element to list2. These event parameters return the HTML tree of my draggable element with the parent having the id "list2". I need to figure out how to track if evt.to contains the list2 element using plain JavaScript or possibly Vue.js.

Here's what I've attempted:

    if(evt.to.getElementById("list2")){
        console.log("IT HAS");
    }

I want to avoid searching through the entire document and focus only on evt.to. Any ideas on how I can accomplish this without JQuery?

javascriptvue.jsvuejs2

Answer №1

Supposing evt.to is a DOM element:

If you are wondering whether evt.to itself contains the id, you can check its id property:

if (evt.to.id == "list2") {
    // Yes, it does
}

If you want to determine if it includes an element with that ID, you can utilize querySelector on it:

if (evt.to.querySelector("#list2") != null) {
    // Yes, it includes it
}

If you need to account for both scenarios, you can easily do so:

if (evt.to.id == "list2" || evt.to.querySelector("#list2") != null) {
    // Yes, it either is it or contains it
}

Answer №2

While the contents of evt.to variable remain a mystery, you can easily retrieve them with this piece of code:

evt.to.id

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

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

javascriptjquerycsshtml

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...

javascriptjqueryhtmlcss

Testing different variations of menu bar designs across various web pages to analyze the impact on user behavior, commonly

Recently, I successfully implemented a test using multiple variations for one page on my website without the need for redirects. The information I used was from this article. Now, I am looking to apply the same testing method to the menu of my website. It ...

javascriptjquerygoogle-analyticsab-testinggoogle-experiments

Contrast between utilizing a WebApp that connects to an API and one that relies on backend

Whenever I develop simple web applications, I often begin by setting up a nodeJS backend, usually creating an API server with ExpressJS. When specific routes are accessed, the server responds by dynamically rendering HTML from EJS based on the current conn ...

javascriptjqueryangularjsnode.jsajax

Handy Node.js package for building a JSON API in a Ruby on Rails application

In the process of creating my Titanium Mobile app, I encountered a connection with a Rails JSON API. I found myself needing to create model objects for Rails model objects, which became quite tedious due to pagination and other factors. I am on the looko ...

javascriptruby-on-railsjsonnode.jstitanium

Adding custom script bundles in NextJS is a great way to enhance the functionality and

I am facing a challenge with incorporating legacy custom JavaScript files into my project. These scripts need to be bundled and linked in the _document.js file with a hash included in the filename. What is the most effective approach to achieve this? I h ...

javascriptwebpacknext.jsbundle

What is the best way to obtain a list of all the modules that are currently accessible in AngularJS

When declaring an Angular module, I specify its dependencies as follows: const myModule = angular.module("MyModuleName", ["Dep1", "Dep2", "Dep3"]); Each dependency comes with its own set of dependencies, directives, controllers, etc. Is there a way to qu ...

javascriptangularjs

Converting a string to an HTML object in Angular using Typescript and assigning it to a variable

I am facing an issue with passing HTML content from a service to a div element. I have a function that fetches HTML content as a string from a file and converts it into an HTML object, which I can see working in the console. However, when trying to assign ...

javascriptangulartypescriptjavascript-objects

invoking a parent function from a cellRenderer in Vue.js Ag-Grid through emit function

I integrated the ag-grid-vue into my project and added a separate component to one of the columns for user actions, such as Edit, View, or Delete. Editing and deleting records work fine, but when a record is deleted, I want the table to re-render by fetchi ...

javascriptvue.jsvuejs2ag-gridag-grid-vue

I encountered an error while attempting to incorporate a simple demonstration of the vue-echarts library

I'm currently working on using the vue-echarts wrapper for the echarts library Encountered an error ("Error: xAxis "0" not found") while trying to implement a basic example from this link: Your help is highly appreciated. Below ...

vue.jsecharts

Trouble with Fetching JSON Data using AJAX

Having trouble retrieving JSON data from an acronym finder API using a simple GET request. Here is the code I'm using: $.ajax('http://www.nactem.ac.uk/software/acromine/dictionary.py?sf=DOD', { crossDomain:true, dataType: "jsonp ...

javascriptjqueryajaxjson

Implementing authorization middleware using Express.js in Ajax

My app has a straightforward authorization middleware that functions flawlessly with regular GET and POST requests. However, when I send a POST request via AJAX, the middleware fails to redirect to a 401 page and instead bypasses it, allowing the data to b ...

javascriptjqueryajaxnode.jsexpress

Tips for extracting the image URL from my JSON string

I am in possession of a json file that includes URLs for images, and I have come across something that seems to be a URL, which is encoded as: iVBORw0KGgoAAAANSUhEUgAAADYAAAAzCAMAAADrVgtcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6m ...

javascriptjqueryjsonencryption

The completion event was not triggered during the AJAX request

I am having an issue with a function that I have created to make an ajax call. Despite using the .done method, it does not seem to be firing as expected. Upon checking my console for errors, I came across the following message: https://i.sstatic.net/CbYBR ...

javascriptajax

transmitting information from the state to actions in Vuex

I am trying to pass latitude and longitude coordinates from the state to an action in order to retrieve the city name based on the coordinates. However, I have noticed that using state.lat and state.lng directly in the axios.get URL does not work. What a ...

vue.jsvuex

Implementing auto-suggest functionality in a React-Bootstrap Select component

I am seeking to create a specialized react select component that can search through a constantly updating list pulled from a server api in JSON format. I am currently exploring other options aside from React-select because it is not compatible with my proj ...

javascriptreactjsselectreact-bootstrapreact-select

Error: Unable to locate module: Material-UI - Please check the path and try again

Encountering this error: Error message: Failed to compile ./node_modules/@material-ui/core/Modal/Modal.js Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in 'C:\Users\rifat\ ...

javascriptreactjsmaterial-ui

Node.js TypeError: Unable to access property 'path' of an undefined object

In my Nodejs implementation, I am working on uploading various types of files (photos, mp3, pdf) to Amazon Web Services S3. Right now, I am focusing on uploading an mp3 file but keep encountering the error: "TypeError: Cannot read property 'path' ...

javascriptnode.jsamazon-web-servicesamazon-s3

Do not replace null with an empty string when blurring a b-input

Encountering a reactivity issue in Vue JS 2.6.6, unsure if it's a bug or oversight. Fetching an object from MySQL DB via axios yields: resource:Object id: 123 alt: null file:"2a72d890d0b96ef9b758784def23faa1.jpg" type:"jpg ...

vue.jsv-modelvue-reactivity

Guide on adding information to a Firestore subcollection using v9 of React JS

const docRef = collection(db, "rooms", channelId, "messages"); addDoc(docRef, { message: input, timestamp: serverTimestamp(), user: 'Apollos', userImage: 'https://naniwallpaper.com/files/wallpapers/eren-yeager/1-EREN%20YEAGER-1080x19 ...

javascriptreactjsfirebase