All Questions
Tagged with javascript event-handling
221
questions
1
vote
1
answer
42
views
Listening to bootstrap 5 events in a vuejs application
Starting out with VueJS, making a small fun project. The project is a simple static portfolio website, with a navigation bar at the top and a bootstrap scrollspy, jumping to the different sections (I ...
- 199
4
votes
3
answers
165
views
Get the contents of a table cell for all selected rows
I have a table of user info. When you click the button, I want to get the email address from each selected row, output into a comma-separated string.
I got it to work with the following code, but I'm ...
- 143
4
votes
2
answers
419
views
Detecting when a user stops typing
I wanted to detect when a user stops typing. I encountered this answer from SO (Not the selected answer, but the second one which seem to be better):
https://stackoverflow.com/a/5926782/17746636
But I ...
- 421
2
votes
0
answers
71
views
To-do list application
I use a lot of for loops and I think it slows the code down a lot but I have no idea how else this code could be written. Its for a to-do list app and each ...
- 21
0
votes
1
answer
70
views
JS "Tabs" element
How can this be improved?
I'm looking particularly at the twice repeated tabButtons.forEach(button => {
...
- 1
4
votes
1
answer
538
views
Setting all hidden fields based on id
I am working on a web page where there is a checkbox with a value and a hidden field. I want to ask your opinion on whether this logic is sound.
My logic
The checkbox has a value that matches the id ...
- 353
2
votes
1
answer
945
views
Animating GIF on hover in Javascript
I don't know JavaScript and it's safe to say this is my first code ever written in JS.
I just needed to animate my GIFs when user hovers over them only.
Googling separate concepts such as "string ...
- 1,568
0
votes
1
answer
160
views
0
votes
1
answer
280
views
Updating active cards dynamically added by API
I am making a website where you can search through all the countries in the world. Once you have found a country you want more detail about you should be able to click and view a detailed page with ...
- 33
3
votes
1
answer
369
views
Javascript array from IP address
I want to make this code better. It works now but I think it can be better. I have a working sample on jsfiddle.
When the page loads I have the End IP Address disable until the data is entered. Then I ...
- 45
1
vote
2
answers
168
views
Javascript - On mouseup check if any of the parents has/includes specific id
On my page I have a mouseup eventlistener on document. I want to be able catch if the clicked elements has a specific ...
- 113
1
vote
1
answer
162
views
list of games to open radar match in iframe on for drop-down controls
In general my page is slow and has several points in the code that I believe can be improved, even in relation to the structure used. Anyway, the biggest problem is:
The page I'm creating is very ...
- 205
3
votes
2
answers
103
views
Javascript (ES11) Event System implementation
So I decided to implement a basic event system in JavaScript.
My goal was to support the following functions:
on - allows the user to register a handler on the ...
- 425
3
votes
2
answers
87
views
Limit second <select> options based on the first <select>
I want to see if there's a better way to write this code, solely in Javascript.
There are two kinds of sets, the first set (C7, T7, C11, T11) have four options in the first select, and then up to two ...
2
votes
1
answer
320
views
To-do app front-end in Vue 3
I have put together a To-do Application with the Slim framework on the back-end (API) and a Vue 3 front-end. I added a demo on my YouTube channel.
In the main App.vue file I have:
...
- 525
4
votes
2
answers
982
views
1
vote
1
answer
317
views
dispatch event listener problem after click
My code is working fine...
but I want to remove below those(1) lines of code from my example code(2) (JS Code). If I remove those code then a tag is not working. (a tag do not open link or href is not ...
- 63
2
votes
1
answer
336
views
JavaScript copy-to-clipboard class
I am have made a small copy-to-clipboard script.
I have made a method called copyToClipboard that does the following:
create an input box;
read the content of an ...
- 525
4
votes
1
answer
93
views
Javascript Pub/Sub
Here is a short pice of code that suppose to work as Pub/Sub or EventDisptacher of some sort.
I only do code in JS a few times a year, so hence I'm asking for your time. Right now I'm working on ...
- 43
2
votes
1
answer
226
views
Carousel Using Vanilla Javascript
As a beginner project, I've start working on this carousel slider that would slide through an image and a testimonial on click.
The number of images and content slides would always be the same number. ...
- 23
3
votes
1
answer
168
views
Submitting form jQuery checkboxlist
In my requestForm submit function I have this logic that checks three checkboxes and then displays the label with an error message. Is there better logic? I would be happy for any kind of feedback ...
- 123
9
votes
2
answers
519
views
Flex panels in CSS and JS
I was following Wes Bos JS 30-day challenge, so HTML and CSS are mostly are copy-paste,
I'd like feedback on JS (mostly).
Thanks.
...
- 779
9
votes
2
answers
711
views
Animated Calendar using HTML + CSS + JS
I'm a beginner developer and I'm building a calendar for smartphones. I'm using HTML, CSS and JS. I'm not entirely done with the project yet, however, I have the feeling that I'm making a messy code. ...
2
votes
1
answer
406
views
Infinite Slider Conversion to Prototype
I've found the following example of an infinite slider to use on a project but as I will have multiple instances I have converted it to a prototype.
The original example
https://medium.com/@...
- 401
2
votes
1
answer
179
views
Multiple audio player - arrow keys & space
I am creating a VueJS component of an audio player.
I am having some difficulties in finding the ideal way to get the arrow keys and space bar to work.
I have found a solution, however I think it is ...
- 161
1
vote
2
answers
100
views
Javascript to-do application for native Javascript
I did a simple to-do application for native Javascript. This is my first time, previously I used only jQuery. What recommendations would be useful?
https://codepen.io/denibudeyko/pen/MWyEmox
...
- 121
1
vote
0
answers
55
views
Dynamic adding and removing div elements using event streams (eventlistners)
I has div block feedList which contains feedItems. Now to fill ...
- 186
0
votes
1
answer
63
views
Cleaning up Javascript event listener that manages game-loop
As I added more features to my chess game, such as an endgame screen. I eventually ended up having a lot of duplicate code, and complex logic with lots of nested if statements in loops. The usual ...
- 177
2
votes
2
answers
454
views
jQuery form.find radio class
In my application we have four inputs that are radio controls and the first radio control is checked by default. When the user selects another radio control and then saves the form I want to get the ...
- 353
3
votes
1
answer
1k
views
Summing CSV files row by row using Node.js events
I need to read multiple CSV files that have the same number of rows, and compute some results for each row. For simplification purposes, and in the scope of this code review, this computation would be ...
- 141
1
vote
1
answer
163
views
Showing form on btn click - preventDefault of submit btn, then remove listener
I've built out a section on a page that contains multiple instances (why I'm using querySelectorAll()) of this Request Brochure form. They are using Campaign ...
- 401
3
votes
1
answer
73
views
eCommerce Mock App
This is a follow-up question to eCommerce Mockup App in JS.
How do I implement the 'observe' pattern for the cart to regenerate html? So that, it will keep refresh its own. And any review on my coding ...
- 925
3
votes
1
answer
188
views
Basic event stopPropagation() example - a better way of doing so?
I've got a very very basic demo here that uses the .stopPropagation method. I want to just make it so that clicking on the parent element only runs the function, so ...
- 567
3
votes
1
answer
313
views
Javascript Slider that controls TinySlider - feels inefficient [closed]
I feel like the main point of inefficiency is how I create "notches" and must loop through all of the created notches every time the value for the slider is changed.
...
- 31
2
votes
0
answers
1k
views
JavaScript: implement event listener in custom object
For many years, there have been several JavaScript libraries for implementing custom events and event listeners. But, as MDN web docs suggests, there are now available constructable Event, CustomEvent ...
- 121
2
votes
1
answer
428
views
Clean up function in Javascript Event Listener
I am trying to refactor a chess game I am currently creating so the code is more flexible and maintainable, while doing this, I came across an event listener which I have no idea on how to make "...
- 177
5
votes
1
answer
193
views
Javascript To Do Application
I've created a simple JS 'To Do List' application. I'm very new to JS and this is the first JS project I have done. I would greatly appreciate any feedback on how to make the code more efficient, ...
- 75
1
vote
0
answers
59
views
Repetitive code for an event listener
So I'm using the event emitter as some sort of an event bus(If I'm allowed to call it that).
The problem I've stumbled upon is that my listeners might want different data than another listener. Since ...
- 153
12
votes
1
answer
468
views
Resizable containers with VueJS
A month ago I reviewed the code in Resizable split DIVs Vue.js, suggesting that the OP use computed properties and bound styles to simplify the code (at least reducing the need to use ...
- 27.9k
1
vote
1
answer
186
views
Display name and email fetched using JSON API when hovering
I'm learning AJAX JSON. I'm just testing how to pull the data. The idea is, when hovering over the number, it pulls the data and show the content for name and email. Number 1 is to show name and ...
- 11
6
votes
1
answer
569
views
Resizable split DIVs Vue.js
I just started Developing Web App (Vue.js) for my company for around 1-2 months. Therefore, my knowledge and experience in HTML, CSS and Javascript is kinda shallow.
I've created a custom resizable ...
9
votes
2
answers
130
views
User-focused timeline logging
I'm working on a small piece of my personal website. I'd like a timeline logging all of my relevant achievements in my career in Computer Science, in general. I'd like to implement a feature that ...
- 191
5
votes
3
answers
411
views
Wrap a js function with a fixed this arg
If I use node.addEventListener('click',Wyg.Editor.nodeClickedEvent); then when node is clicked, ...
- 239
9
votes
2
answers
5k
views
"Block a website" script with vanilla JavaScript
I use this script to block access to a one or more websites with vanilla JavaScript. I find that it helps me avoid some addictive news websites that make me depressed. (Credit to Marat Tanalin for ...
user125391
5
votes
2
answers
442
views
Dropdown menu that opens on click using plain Javascript
I made a simple dropdown menu which opens when clicked, and closes when the user clicks anywhere outside the menu. The following is the codebase:
...
- 418
7
votes
2
answers
253
views
eCommerce Mockup App in JS
I have completed this mockup eCommerce app using Javascript. This version can add products into a shopping cart and automatically calculate the order summary in the shopping cart. It can also delete ...
- 925
6
votes
1
answer
499
views
Simple input class change with vanilla JS
I am just testing how I solved simple stuff.
Goal: The aim is to expand the width of an input and collapse it.
When mouseover ...
- 143
1
vote
1
answer
88
views
Automatically select the table rows between two selected rows
The code is to check the rows in a table. If in a table two non consecutive rows are checked then all the in between rows should be selected by itself. Also, after selecting two rows, on selection of ...
- 23
2
votes
2
answers
258
views
Cardinal direction enum from range input
Still learning JS and I made the following function to convert degrees into cardinal directions respectively. My first iteration of the code was over 50 lines and I was able to get it down to 13 using ...
- 131
4
votes
2
answers
465
views
Dynamically add/remove fields on input
The following code allows users to enter multiple optional quantity fields after first filling in a value of the current quantity input. If the input field contains a value it will then display the ...
- 143