Questions tagged [dom-events]

DOM (Document Object Model) events allow event-driven programming languages to register various event handlers/listeners on the element nodes inside a DOM tree.

Filter by
Sorted by
Tagged with
0 votes
0 answers
22 views

Use JavaScript to validate input for the two search boxes

I only want to use js for validation. The name box should accept no more than 20 characters and not accept numbers. The currency code box should only accept three upper case letters A-Z. The search ...
Shaz's user avatar
  • 1
0 votes
1 answer
18 views

JavaScript - skipping form div and start previous session after page reload

Can someone please help with this, after 3 days still not able to find the solution. I wrote a function that integrates FreshChat into my website. I have input fields within the form that I want to ...
Filip Stojanovic's user avatar
2 votes
2 answers
45 views

Get current time in JavaScript when the browser retrieves a cached html page

I'm having a html-page which is cachable. At the end of the page, I put: <script> console.log(Date.now()); </script> I load the page: The console shows 1695306780514. I follow a ...
Werner's user avatar
  • 1,735
0 votes
0 answers
11 views

How do I get compositionupdate events on an HTML canvas

I am trying to create a custom text entry widget inside a Canvas (this is a WebAssembly app that is using only a canvas, like Figma does), but there does not seem to be a way to get compositionupdate ...
prewett's user avatar
  • 1,587
1 vote
1 answer
33 views

Sandbox events inside closed shadow root

I have a closed shadow root in my document that represents custom controls containing sensitive information, however it seems as though (despite being closed) events will still bubble out of the ...
Prime's user avatar
  • 2,420
1 vote
1 answer
45 views

Trying to enable and disable css files through javascript

I have 2 different css files, I want to use them both dynamically. I have a mobile preview button that will change to another css file, and also change the same button text to Desktop Preview, and I ...
BigMoves's user avatar
-1 votes
0 answers
19 views

VueJS 3 - @blur and @focusout - prevent from specific child element

i wonder if anyone can suggest, how prevent closing component by clicking on input, if i still wish to keep blur on main parent (to close if clicked outside). const app = Vue.createApp({ ...
Peminator's user avatar
  • 811
0 votes
2 answers
28 views

In my SearchBar component react, the problem is while I'm selecting the list item there is nothing happening onClick function

Problem Description: I'm working on implementing a search bar in my React application. The search bar should show a list of suggestions when users type in the input field. These suggestions should be ...
Mayuresh's user avatar
0 votes
1 answer
21 views

Need to Create an input element that takes only letters from a-z, A-Z and space

Create an input element on the page with a placeholder” enter your name” and an H2 heading on the page inside HTML. The purpose of this input element is to enter a user’s name so it should only input. ...
Pranav's user avatar
  • 1
0 votes
0 answers
38 views

Why is my JavaScript "for of" loop not working? [duplicate]

I need a JS script to change the input of an HTML input element when you leave the input field in the way that all upper case characters are changed to lower case and vice versa. When I write it using ...
Simorq's user avatar
  • 43
2 votes
2 answers
65 views

Understanding Queued Click Events on Disabled Button in JavaScript

I'm puzzled by the behavior of the following code snippet. I have a button that becomes disabled while running a long computation after it's clicked. function delay() { console.log(...
justasking's user avatar
0 votes
0 answers
25 views

How to dispatchEvent key up in a for loop and waiting for a dom search reaction to put the resulted element in an array

I would be gratteful if someone could give me some clue. I'm trying to dispatch Key up event in a input element after fill in it. Everything is in the Dom. The line code is in a loop. So it gives me ...
Gilles Gruwez's user avatar
-1 votes
1 answer
48 views

Run code when the tab or browser windows is closed, but not on page reload

I want to run a javascript function when the user closes the tab or window, but not if the user simply refreshes the page. I tried an event handler for the beforeunload event, but it will also get ...
Osama Ameer's user avatar
0 votes
0 answers
33 views

When use event capturing in react ref undefined

function Window({ children, name }) { const { modalName, closeModal } = useContext(ModalContext); const ref = useOutsideClick(closeModal); if (modalName !== name) return null; return ...
emirhan's user avatar
  • 11
0 votes
0 answers
20 views

Create custom dialog box using beforeunload event in react

useEffect(() => { const handlePopstate = (event) => { event.preventDefault(); event.returnValue = "Leaving this page might result in data loss."; }; const ...
HARI PRASATH's user avatar
0 votes
2 answers
44 views

Cant Check Through All the Input Text Boxes for answers

I'm not sure how to go about this to try and check the user input to the answers. I have the answers set in the <input id="">, it works for the first question but doesn't work for the ...
Benxsu's user avatar
  • 11
0 votes
2 answers
63 views

How to properly check if the button pressed is correct in multiple choice quiz HTML/CSS/JavaScript

I'm wondering how to adapt this further, when I don't use All, it works for the first question. However, on the second question, the buttons don't work. Using All for some reason doesn't allow me to ...
Benxsu's user avatar
  • 11
-3 votes
0 answers
36 views

A script designed to capture a username and save to local storage is not being hit when inserted into my code?

This should have been a fairly basic script. It looks as so: <script> $(document).ready(function() { const captureLoginData = () => { console.log("capturing login data"); ...
kastaplastislife's user avatar
1 vote
0 answers
27 views

TypeError: Cannot read properties of null (reading 'addEventListener') - JavaScript

I am trying to run the below code which uses an external library and it keeps giving me the error "TypeError: Cannot read properties of null (reading 'addEventListener')". I can't seem to ...
fembiz's user avatar
  • 11
1 vote
0 answers
69 views

is dom event handler a microtask or a macrotask in the event loop? [duplicate]

=== update on Aug 18th, 2023 .click() is synchronous (I've made a mistake in my previous code snippet, the callback in the Promise constructor also runs synchronously) if I add one line of Promise....
Littlee's user avatar
  • 3,821
0 votes
0 answers
20 views

How do I get my event listener to respond to the initial value of my slider input?

I finally got my etch a sketch to respond to my slider 'input' element. I created a transformGrid function to organize this. The problem now is that upon page load, there is no printed grid till i ...
tem's user avatar
  • 1
0 votes
2 answers
35 views

How to get the location of TouchEvent in Javascript

I am trying to add touch compatibility to my js game and need to know the location of the touch event on window object, With clicks you get e.x,e.y but there is no such property for touch start. I ...
Javascript-GameDev's user avatar
-1 votes
1 answer
37 views

Cannot close my component when clicking anywhere outside

I'm trying to fix an issue with a component that whenever I click outside its window it works as expected except for when I click on buttons from other components which have their own functionality. ...
Jorge Alvarez's user avatar
-1 votes
3 answers
82 views

Remove Item from shopping cart does not work

REMOVE button does not work. Even in console when i click the button nothing appears in the console. Can anyone spot the problem? I feel like something is wrong with the classes, not sure though. This ...
George Neofytou's user avatar
0 votes
2 answers
38 views

Keydown event that records the users correct input and displays it in the box without erasing on the next keydown event

I am making a variation of a hangman game. I have the random word generator give me a word in the phrase variable and then the passPhrase variable breaks it into an array. I want the keydown function ...
Tory S.'s user avatar
0 votes
0 answers
54 views

Javascript not working for IOS 16.3.1 and lower

I have javascript code on my web page, It works for desktop, android, However it's not working for some iPhones, each part of my code, input events, click event Works for this iPhone models and ...
Banahez's user avatar
0 votes
3 answers
111 views

How to make clicking some elements an exception for useClickAway hook

I have an Overlay which is opened by clicking an icon button. In that Overlay, I'm using the useClickAway hook exported by the react-use library - useClickAway(overlayRef, hideOverlay); Basically, ...
Anmol kansal's user avatar
0 votes
1 answer
40 views

Style not getting applied when `focusout` happens due to `shift+tab`

I have a very simple scenario in which I want to show the submenu associated with li when it's focused via tab key and when the focus is out, it should hide the submenu. Here's my code: const ...
ABGR's user avatar
  • 4,641
1 vote
0 answers
29 views

React browser "back" press handle/listener [duplicate]

I have an Issue with my react project... I am trying to trigger "triggerDisband" function whenever the window closes. So far the 'beforeunload' listener did the job well, it works on browser ...
Clorox Bleach's user avatar
0 votes
0 answers
28 views

onClick event listener not working in vis-network implementation on salesforce aura component

I have implemented vis-network to plot a network on Salesforce aura component.But when clicking on any node of the network it's not working. var network = new vis.Network(container, data, options); ...
Alok Tripathi's user avatar
0 votes
1 answer
18 views

How to integrate necessary native DOM methods like addEventListener with react?

I'm currently working on a project that involves integrating React events with my codebase. However, I'm having trouble incorporating them with certain libraries that do not inherently support React, ...
CoderButBeginner's user avatar
0 votes
0 answers
18 views

Locking folders from accessing in windows

I want to write a python script that can run at the background and monitor the folders accessed. If a particular folder is accessed, it should ask for password. If the password is correct, the folder ...
user avatar
1 vote
0 answers
33 views

The button onclickon eventlisteners is not working?

I'm practicing javascript and I copied and pasted the code but still not working. Have I missed something? I created a notes taking app and when the user clicks the button, the note should show but it ...
Potatostudies's user avatar
-1 votes
1 answer
51 views

Why `return` is used in javascript event function [duplicate]

Html: <input type="text" onkeypress="return isNumberKey(evt)" /> JavaScript: function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : evt.keyCode; if (...
Toha's user avatar
  • 5
5 votes
1 answer
72 views

JS IME composition and Mac accent menu handling in custom input field

Working on a project where handling various languages (Japanese, Chinese etc.) as well as handling different language directions (right-to-left, left-to-right and the combinations of the two) is ...
Martin Janíček's user avatar
0 votes
0 answers
16 views

How to get the contenteditable target of a keyup event caught by a parent element in shadow root?

I created a shadow root in the content script of a Chrome extension, and in the shadow root I created a container with id 'container' containing three elements, namely 'parent-1', 'parent-2', and '...
Lerner Zhang's user avatar
  • 6,234
1 vote
1 answer
26 views

Why does blur event never fire if Chrome developer tools debugger is triggered?

Consider this input - we blur on pressing enter. It normally works. But if you open Devtools, so the debugger line works, then !!blur never fires - even though the element loses focus! Why, what's ...
xyz's user avatar
  • 201
0 votes
1 answer
39 views

Can't play Audio file from Array

var x = document.querySelectorAll("button"); for (var i = 0; i < x.length; i++) { x[i].addEventListener("click", drum); } var drumSound = ["sounds\\crash.mp3", &...
Shaker's user avatar
  • 1
1 vote
1 answer
20 views

Can't get data from element by clicking

everybody, i've been little stuck on one thing. I have code like this in JavaScript, JQuery. And those lower part with click, i just can't get data-num attribute, from clicked element. I've tried 100 ...
MilanKlepar's user avatar
0 votes
0 answers
15 views

how can i prevent website's behavior event on the press of a key based on a condition using content scripts from an extension?

I have this extension where it allows user to make a list of notes, and it starts to watch the focused element's user input using content scripts, and if user activates an option in it, it will start ...
mark's user avatar
  • 51
0 votes
1 answer
45 views

Find the interactive elements in a Website using DOM

How to conclude an element is interactable using DOM? I couldn't find onclick event on some elements in DOM, but they are clickable. sites build with different framework act differently. I have tried ...
SHABEEB K's user avatar
-1 votes
3 answers
178 views

onChange prop and custom Event dispatch in React

I'm testing new version of my library tagger where there is custom Event dispatch on input element: this._input.dispatchEvent(new Event('change', { bubbles: true })); The problem is that the onChange ...
jcubic's user avatar
  • 62.2k
0 votes
2 answers
56 views

how to detect a Key Sequence in Javascript

i am writing an userscript that post in a forum each time a shortcut sequence is executed [ ctrl + enter ], but the function that i wrote excecutes both keydowns as separate events, and not a single ...
hopepill's user avatar
-1 votes
1 answer
48 views

How to create a window function that can update model data in a rendered VueJS v3 app?

I have a use case that requires me to use window level vanilla JavaScript functions to be able to refresh/update data inside of an already rendered Vue app. I can't really use any async processes or ...
mjbcbus's user avatar
0 votes
1 answer
29 views

Continuing code after an unhandledrejection event

https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event The unhandledrejection event is sent to the global scope of a script when a JavaScript Promise that has no rejection ...
jwa's user avatar
  • 122
0 votes
1 answer
33 views

catch change event from input textbox that is being removed from the lost of focus event

I have a text type <input> and I'm listening to its on change events (so I can record the new new value elsewhere). When a text <input> loses focus, it triggers a change event. This is ...
carandraug's user avatar
  • 12.9k
0 votes
0 answers
31 views

Possible EventEmitter memory leak detected. 11 analytics-event listeners added

I have a set of hyperlinks in my chatbot with class name of "q_link". I added a click event to the document to recognize wehenver the target is the link. document.addEventListener("...
YASH KUMAR's user avatar
0 votes
1 answer
52 views

Best way to scroll x and y independently for overlapping elements

apologies if this is a duplicate. I have a series of nested divs as below: -container -row where the container and row have an extra container each to allow scrolling without the default scrollbar ...
Callum's user avatar
  • 11
0 votes
1 answer
44 views

Slider in my website keeps going to the bottom

I was trying to build a custom vertical slider for my website instead of using the <input> tag, but when I tested it out, the slider kept going to the bottom. What's wrong with offsetY that ...
a_programmer_on_stackoverflow's user avatar
2 votes
2 answers
155 views

Jest capture input change event and verify it was called with the correct value on a controlled react component

I am trying to use jest and @testing-library/react to verify that a react component (which wraps an HTML input element) is calling it's onChange callback with the correct value in response to a ...
Kobek's user avatar
  • 1,149

1
2 3 4 5
250