Questions tagged [addeventlistener]
a DOM event method that adds an event listener to a given DOM node
3,890
questions
0
votes
0
answers
4
views
How to access newly created DOM elements in JS? (I have used appendChild)
I am making a to do list. Each list item includes a remove button when created.
But I cannot access these remove buttons in my script, because it is not included in my DOM, although I used '....
-1
votes
0
answers
20
views
addEventListner storage not working chrome
I am creating a dark and light theme toggle but my code is not working.
window.addEventListener("storage", (e) => {
console.log(e);
});
the StorageEvent is not coming in the console. ...
1
vote
1
answer
34
views
Why does addEventListener function showing the error? [duplicate]
I faced this problem when i doing my project and not able to use addEventListener function. So I make new file and try to catch the error, so basically its store null value to the variable that's why ...
0
votes
1
answer
17
views
window.addEventListener('click', function) not working on iPhone
I am currently working on Wes Bos' JavaScript 30 project, and in this drumkit project, I was hoping to add to his finished code by allowing user to click on the button rather than only through '...
2
votes
1
answer
52
views
Keep EventListener running untill the box is checked
The Context
I have a form where text fields must pass validation before the checkbox to accept terms and conditions is shown.
The Problem
I want the code to hide the element, even after validation has ...
-1
votes
0
answers
23
views
Cannot use js variable inside addEventListener [duplicate]
I should be quite simple but I can't access a variable inside addEventListener
So I have a img with id="homepage-banner-background" and I'm trying to zoom it but I can't
<script>
var ...
-2
votes
0
answers
9
views
JavaScript Return IDs collectively
var homepage = document.getElementById("homepage");
var signup = document.getElementById("signup");
var login document.getElementById("login");
var reset = document....
0
votes
2
answers
32
views
Javascript - Remove class with document.addEventListener not working
I'm trying to close dropdown menu by clicking on the body or whatever. To do this I'm using document.addEventListener but it doesn't work.
By doing several tests I managed to get the code to work by ...
-2
votes
1
answer
34
views
Javascript addeventlistener working without parameters
I was looking for javascript documentation and found this
const log = document.getElementById('log');
document.addEventListener('keydown', logKey);
function logKey(e) {
log.textContent += ` ${e....
0
votes
1
answer
26
views
A Function that’s dedicated to adding the event listener to the newly created button
I'm trying to create a function that is dedicated to adding the event listener to the newly created button.
I'm currently taking a course and I can't seem to understand this part:
"Optional (...
0
votes
1
answer
55
views
How do I use Javascript to return the text of the paragraph clicked as a usable variable?
I'm new to Javascript and self taught, my english is a little rough too, please bare with me. I've searched all over and tried everything I can.
I'm trying to make a table of content where clicking it ...
0
votes
0
answers
18
views
Callback function on addEventListener [duplicate]
so in this challenge, I have to change the element's color on mouse entering it as well as mouse leaving.
This is the website for the challenge.
https://www.jschallenger.com/javascript-dom-exercises/...
0
votes
0
answers
24
views
How to check if the element is checked
I have this code that that should add different classes to the following elements depending on whether the element before them is checked or not, but for some reason it either gives me the undefined ...
0
votes
1
answer
43
views
Is there any way to trigger a 'change' event listener if input value change dynamically?
Suppose, I have a delegated input field with the class name 'bulk_number' inside a parent class name 'all_bulk_inputs', and a button that will add a random number to that input field whenever I click ...
0
votes
1
answer
24
views
window addEventListener keydown not firing
I'm making the 2048 game, but the window.addEventListener("keydown", handleInput, {once:true}); does not firing. But if I console.log(e.key), I get the message that I pressed the button (...
0
votes
0
answers
13
views
Angular - window - EventListener - refresh main tab when other close
I use Angular 7. I deal with documents When I click on "INDEXER" button, a second tab is opened with content of the first document and a form.
When the form is filled, the second document ...
0
votes
1
answer
18
views
Handle Click Event Listener in Window Scroll Event
I applied window scroll event and then I am getting elements with document.querySelectorAll. So, After executing this i have NodeList. I am looping over this nodelist with forEach.
In forEach i am ...
0
votes
1
answer
42
views
removeListener inside for loop ES6
I'm having trouble removing a mouseover/mouseout listener inside a foor loop.
Let's say I have a menu that on desktop and on hover shows a dropdown, but to open the dropdown I want it on click on ...
0
votes
3
answers
26
views
How to pass the key variable to eventListener function defined elsewhere?
Normally when you add eventlisteners you'd do:
input.addEventListener('keyup', function(e){// get e.keyCode here});
But what if I defined a function somewhere else and just wanna pass the function as ...
-3
votes
1
answer
42
views
addEventListener is not executing [closed]
here is my html and JavaScript code. the Function doesn't run somehow! can someone explain what is wrong. I have similar codes that run ok . but this one is not logical at all.
<!DOCTYPE html>
&...
0
votes
0
answers
25
views
How can I use getElementById or querySelectorAll for an infinite number of IDs? (creating toggle buttons to show/hide divs)
Javascript noob here, as you can probably tell, and was wondering if anyone could help me clean this up. Trying to avoid Jquery, please.
It’s pretty basic: There’s a toggle button, a section of ...
0
votes
0
answers
21
views
Javascript, API previous and next buttons [closed]
I have six pages from an API. By clicking next i want to increment the pages to get the next one which works but i don't know how to make the previous part to drecrement
const previous = document....
0
votes
1
answer
49
views
Div going up, on scroll down
I am creating a single article page to show articles.What i wanted is to have a nice background (article image)and my article body,around midway of my page.When i scroll down though,i want the article ...
1
vote
2
answers
58
views
Can I have an EventListener that responds to a certain numeric value?
In this web app I'm building to keep score in some game, I'm trying to change the background color of a certain element when your score reaches 6000 points or more. It should respond to an <input&...
0
votes
1
answer
45
views
JavaScript Calculator equal button returns "undefined"
I'm working on a simple JavaScript calculator. Everything seems fine and other buttons works as expected except for the equal button which returns an "undefined" when it is clicked. On ...
1
vote
1
answer
19
views
React open dropDown on top or bottom of dropDown input based on the element's position
I have a DropDown component. Currently, on click, the list will open on the bottom of the input box to the max height of 200px.
The problem is that if the input box is at the bottom of the page, the ...
1
vote
1
answer
38
views
Passing variables from HTML to Javascript file that uses addEventListener
I'm using Stripe to accept Apple pay payments (not super important here). I'm using Django. The code works fine for processing the payments, but I'm having trouble passing in a variable to my separate ...
0
votes
0
answers
18
views
how to add the number of global likes updated according to the user click
here is my problem: When I click on a like, it is incremented by 1. This works for all photos that can be liked. I would like to add the total number of likes based on user clicks. I already have my ...
0
votes
2
answers
17
views
Act on the last element of a page with querySelector and addEventListener
I am trying to check the security level of a password and put the field borders in green or red (depending on the respect of conditions). I have succeeded but the JavaScript only selects the first ...
0
votes
1
answer
23
views
How to manipulate multiple element's styles with a single event listener? [duplicate]
This is probably very simple, but I cannot make it work.
I have 2 headings with the same class
<h1 class="heading-title">Hyperspace</h1>
<h1 class="heading-title">...
0
votes
0
answers
34
views
addeventlistener - when to use parameters in the function
(I'm new to coding)
I'm currently stuck on trying to understand when we need to use parameters inside the
userInput.AddEventListener('keyup',function(**event**) {
let username = event.target.value....
2
votes
1
answer
35
views
Canvas JS game, Can't make the character jump only once after touching the ground
this is my code for a canvas game, my character is able to go left right and jump. The problem is that i want to make the character jump only once, then touch the ground again and now, to be able to ...
0
votes
0
answers
33
views
Vanilla javascript - binding an event listener ('click') to a dynamic element
Lets say you have a create button that dynamically creates a element and a button element named play.
The play button has an eventlistener("click") that has a variable named timer that ...
0
votes
0
answers
21
views
AddEventListener option once reset
is there a possibility to reset option "once=true" after modal close to run this eventlistener again?
const sel = document.querySelectorAll(".select-wrapper");
function ...
1
vote
4
answers
55
views
HTML object is blocking eventlistener
I have imported a svg as an object in HTML:
<object data="mySVG.svg" type="image/svg+xml" id="circle">
<img src="mySVG.svg" />
</object&...
-3
votes
1
answer
41
views
addEventListener is not a function error in javascript [closed]
while working with eventListeners in JavaScript, I have came accross an error.
trials.htm:54 Uncaught TypeError: b.addEventListner is not a function
Here's my HTML code :
<!DOCTYPE html>
&...
0
votes
0
answers
23
views
Store value of a button in a variable when button is clicked out of multiple buttons in Javascript [duplicate]
I am trying to store value of a button when it is clicked out of multiple buttons but when I am console logging the variable it says undefined.
const getBtn = document.querySelectorAll('button')
...
0
votes
0
answers
27
views
EventListener function does not execute itself and the console does not return an error at all
I am a newbie, who has been trying to learn coding for a while. This is a primitive code for a crypto dex that I am building by following a tutorial. compared my code to the original, no differences ...
0
votes
2
answers
56
views
Event listener not attaching to all element but attach to last one only in for loop in javascript
I am trying to add an event listener on the thumbnail container and it is not attaching to all elements, but instead always attaching to the last one.
I tried to put the content of for loop in an ...
0
votes
2
answers
36
views
Event listeners get removed after adding/removing some elements of a list
I have a <ul> list with some <li> elements inside, and I've added a click event listener for each of these elements to move the clicked item to the top of the list.
function ...
0
votes
2
answers
37
views
AddEventListener. Event is triggered on page load [duplicate]
If writing the event inline (onclick) it works fine. But with addEventListener the event is triggered on page load. I would like to understand why.
const boxDiv = document.getElementsByClassName("...
2
votes
2
answers
42
views
addEventListener multiple use
I am making an application according to the youtube tutorial. I already know what the correct solution looks like, but I don't know why such a code does not work. It is only executed once. I check '...
0
votes
1
answer
24
views
Controlling Multiple Elements from a Single Event Listener
I am trying to toggle classes on 2 elements from a single event listener, but only the first element gets modified.
const toggleBtn = document.querySelector(".toggle-btn");
const ...
0
votes
1
answer
34
views
How can I change from onclick button to eventListener? (forEach included)
I have trouble switching from onclick to event listener. [Picture link here: I want to change this portfolio buttons to not be onclick][1]I tryed everything i know that it needs to go trough forEach ...
0
votes
1
answer
33
views
Accessing HTML Element after Adding with innerHtml
I am adding the data received as a result of a request to my page as follows.
showMovieInfo(movies) {
this.tableDiv.innerHTML = "";
movies.forEach(movie => {
this....
-1
votes
0
answers
44
views
addEventListener not working on click with module
So, the major context is thats I trying to work with OOP in javascript. To do it, I need to import a class to another js file, and I learned that I need to work with a package.json file thats have:
{
&...
-1
votes
1
answer
74
views
problems in useEffect hook
Let's say I have a state called count.
const [count, setCount] = useState();
Now let's say I would like to increase count with 1 every time some key in the keyboard is being pressed.
So I can use ...
2
votes
2
answers
24
views
Reset Input Value After Unchecking Box Javascript?
Here is my JS code
let items = 0;
document.addEventListener("click", ({ target }) => {
if (target.className === "food" && target.checked) {
parseInt(items)
...
0
votes
0
answers
23
views
How to implement debounce inside of useEffect when dealing with Event Listeners?
I see questions aplenty about useEffect and debounce but this use case is a little different. I was having some trouble with fetchBookList not having access to state variables in the same component ...
0
votes
0
answers
24
views
Having Frontend JS window.eventlistener with child popup issues
Server 1 frontend js file: Parent page:
//There is some code before reaching this line, no point putting it
//Because I need help with code below only.
var call_function = PageConnect();
console....