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.
12,473
questions
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
-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({
...
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 ...
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.
...
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 ...
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(...
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 ...
-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 ...
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 ...
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 ...
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 ...
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 ...
-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");
...
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 ...
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....
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 ...
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 ...
-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.
...
-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 ...
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 ...
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 ...
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, ...
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 ...
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 ...
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);
...
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, ...
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 ...
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 ...
-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 (...
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 ...
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 '...
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 ...
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", &...
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 ...
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 ...
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 ...
-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 ...
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 ...
-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 ...
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 ...
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 ...
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("...
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 ...
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 ...
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 ...