Vanilla.js with Vue does not support the onclick event functionality

Currently, I am facing the need to utilize vanilla.js in my application due to the presence of html entities retrieved from the database that require special treatment. Since the babel compilation process has already concluded, I am resorting to manipulating the DOM directly. My goal is to embed an icon within a span, and upon clicking this icon, I aim to remove the entire span element. Unfortunately, I am encountering a roadblock where, despite successfully creating the icon and defining its attributes such as fontSize, the onclick function does not seem to respond to clicks. I have experimented with various approaches including using a callback function, a vue function, but nothing seems to activate the desired event. Any suggestions on how to tackle this challenge?

        icon.classList.add("material-icons", "cancel_icon")
        icon.innerHTML = "cancel"
        icon.style.fontSize = '14px'
        icon.style.position = 'relative'
        icon.style.top = '2px'
        icon.style.left = '2px'

        icon.onclick = () => this.removeSpan(span)
        console.log(icon.onclick)
        return span

Answer №1

experiment with span.childNodes[0] or span.firstChild

span.firstChild.addEventListener('click', this.removeSpan);

if you need to pass a parameter to a listener function, one approach is to use an intermediary callback like you were attempting

let _this = this;
span.firstChild.addEventListener('click', () => {
  _this.removeSpan(span);
});

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

Is the functionality of `Promise.all` affected by the browser's restriction on concurrent connections?

Suppose an api server is utilizing HTTP/1.1 and the browser has a maximum of 6 concurrent TCP connections per domain. If I make 7 api calls simultaneously using Promise.all, does that mean the last api call will have to wait for the response from the first ...

"There seems to be an issue with the KeyListener function in

The error I'm encountering is: index.html:12 Uncaught TypeError: Cannot read property 'addEventListener' of null I'm unsure about what went wrong. The intention behind the code was to store the result of the selected radio button into a ...

JavaScript: Efficiently Sorting a Multidimensional Array

Here is the array that needs to be sorted based on the third item: const array = [ [1, "Convention Hall", "Mumbai", 10, "XYZ Company"], [2, "Auditorium", "Delhi", 10, "ABC Company"], [3, "CenterHall", "Bangalore", 10, "ZZZ Company"], ... ...

Tips for combining all included files into one with Babel

My current project involves the use of Babel. Within my server.js file, I have the following line of code: import schema from "./data/schema"; The issue arises because data/schema.js is written in ES2015 syntax. After attempting to compile my server.js ...

What is the process for loading an external file within an npm script?

Objective: Testing the linting process of specific components within the source code, without affecting all files. I want to streamline the linting process by running a single command that covers multiple folders specified in a configuration file: //pack ...

Assign the DatePicker Object to an HTML Element

I am currently using a SyncFusion date picker in my project and the implementation looks like this: var datepicker = null; $("#datepicker").hide(); $("#click").click(function(){ $("#datepicker").show(); datepicker = new ej.calendars.DatePi ...

Audio in A-Frame does not function properly when in VR mode

My friend and I are collaborating on a small project involving a VR simulation that requires audio instructions. While everything functions smoothly in the web version and even on mobile devices, we encountered an issue when switching to VR mode on mobile ...

Adjust the width of a div based on its height dimension

I have a div called #slideshow that contains images with a 2:1 aspect ratio. To set the height of the image using jQuery, I use the following function: Keep in mind that the Slideshow Div is always 100% wide in relation to the browser window. If the use ...

Expansive menu that stretches the full height of the webpage

I'm having difficulty making my side spry menu extend the full length of the webpage. I tried using this code: $("nav").css({ "height" : $("nav").height() }); but it still isn't working as expected. I just want the grey color, like ...

Commit the incorrect file name with the first letter capitalized

There seems to be an issue with the git not recognizing the correct filename casing. I have a file named User.js in my workspace, but when checking the git status, it displays user.js instead. Despite repeatedly changing and committing as User.js, the gi ...

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

Tips for preventing repetition in http subscribe blocks across various components

Imagine a scenario where there is a service used for making HTTP request calls. There are two different components (which could be more than two) that need to send the same request using the same observables via this service. After receiving the result, it ...

Exploring the use of callbacks in React closures

After diving into a React related article, I delved deeper into discussions about closures and callbacks, checking out explanations on these topics from Stack Overflow threads like here, here, and here. The React article presented an example involving thr ...

Encountering a Parsing error while utilizing redux: Unexpected token present

Trying to implement Redux for managing the searchField state on the website. After creating action.js, reducer.js, constant.js, and redux.connect() function, An error occurred: Parsing error: Unexpected token 62 | return <div className=&apo ...

Difficulty Loading Static JavaScript File in Express.js

Currently in the process of setting up an express server with create-react-app. Encountering this error in the console: Uncaught SyntaxError: Unexpected token < bundle.js:1 Upon clicking the error, it directs me to the homepage htm ...

Update the url as needed when retrieving data in a Vue.js component

I am attempting to retrieve data in my Vue component, as shown below. However, since I am making the fetch request from my blade view in public/manage-users-projects, the URL ends up being http://localhost:8080/ProjsiteWebApp/app/public/manage-users-projec ...

Is it possible to alter the default component directory location in VuePress to '.vuepress/components' using the register-components feature?

Attempting to incorporate a custom directory of components into vuepress using the plugin register/components has proven to be challenging. My setup looked like this: module.exports = { title: 'Hello VuePress', description: 'Just playi ...

Tips for converting a number into a percentage with two decimal places using FormatJs Message Syntax

With the react-intl library, I am encountering a message that looks like this: serviceFee: { en: 'Service fee: ({fee, number, percent})', ... }, Upon calling <FormatMessage id="serviceFee" values={{ fee: 0.0625 }} /> I anticipate th ...

Revive the JavaScript library for handling mouse wheel events

Utilizing the wheel-indicator JavaScript library, I am looking to revert the mouse wheel event back to its original state after it was initially set to preventDefault(). Despite attempting to use indicator.setOptions({preventMouse:"false"}) as suggested b ...

Tips on effectively transferring formarray to another component

I'm attempting to pass a formarray to a child component in order to display the values within the formarray there. Here is my current code, but I am struggling to figure out how to show the formarray values in the child component. app.component.html ...