I encountered an issue where the map loop for slides was not working and I have yet to find a solution.
let slide = document.querySelectorAll('.slide');
//not working below
slide.map((s)=> s.onmousedown = slideFunction);
function slideFunction(){
alert('HI')
}
// working below
let num = [3,2,5,2];
num.map((n)=> alert(num));
The map loop is not functioning properly for each slide, but the numerical value array is working as expected.
There are a few points to consider:
map(), it is recommended to use forEach().document.querySelectorAll() function returns a NodeList, not an array. To use array functions like map(), you need to convert it to an array first.forEach() function provided by NodeList on the result returned by document.querySelectorAll().let slides = document.querySelectorAll('.slide');
slides.forEach((s) => s.onmousedown = slideFunction);
function slideFunction() {
alert('Hi')
}<div class="slide">Slide one</div>
<div class="slide">Slide two</div>It might be cleaner to attach an event handler rather than directly assigning it.
The reason why querySelectorAll produces a NodeList is because it acts like an array, even though it isn't one.
To work with it effectively, you need to transform it into an actual array:
Array.from(items).map((item) => item.addEventListener('click', handleClick));
Hey everyone! I've got a POST form with a field like this: <input type="text" name="username" /> Using jQuery, I have declared a variable called var username = <---insert code here--->; Here's the question: How can I dynamically as ...
My attempt at submitting a POST request to my nodejs (express) server is not populating any data from my form in the req.body. I have searched for solutions and found that many suggest moving the bodyparser before the routes and ensuring form fields have n ...
I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...
I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed. My concern is if a user starts filling out one form and then decides to select another option, I want to add ...
When making an API call from Angular 5, the response is returned in the following format. { "metadata":{ "lastSyncTime":"2000-11-21T16:07:53", "dataFromDB":true }, "allocationReports":[ ...
Is there a way to align the column headers to the right in AgGrid without having to implement a custom header component? It seems like a lot of work for something that should be simple. You can see an example here: https://stackblitz.com/edit/angular-ag-g ...
Here is a string that I have: [{"data1":"A"},{"data2":"B"},{"data3":"C"}] Using jQuery, I converted this string to JSON: test_json = $.parseJSON('[{"data1":"A"},{"data2":"B"},{"data3":"C"}]'); After conversion, I obtained 3 objects: https:/ ...
Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away. .product-list-item { position: relative; w ...
I am working with a 3 by 5 matrix, filled with numbers from 1, presented as follows: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 The task is to print the values in a half-spiral order, starting from the bottom left vertically: 11 6 1 5 10 15 12 7 2 4 9 ...
Seeking assistance with creating a simple layout utilizing the Vuetify grid system. The goal is to have a row that fills up the minimum space and another row that takes up 100% of the remaining space. Current Layout: https://i.sstatic.net/DyDeJ.png Desire ...
I have encountered warnings in VSCode while using certain properties in my Angular component. The warnings state: '_id' is declared but its value is never read.ts(6133) (property) ItemEditComponent._id: number | undefined '_isModeEdit' ...
I'm facing a challenging problem that I just can't seem to solve... There's a function on another website that I need to use, but unfortunately, I can't modify it The code in question is: Now, I am looking to add a prototype "aaa" to ...
Exploring Vue.js Web Form Validation with a Scenario If you are interested in the vue-form validator library, it can be found at https://github.com/fergaldoyle/vue-form For a demonstration of this scenario, check out the following jsfiddle link: https:/ ...
Currently working on a website design project for a friend who requires a "Contact Us Page". I am utilizing Bootstrap Studio and have successfully created a page where users can enter their name and email. However, I am facing difficulties in configuring ...
I have a table with columns and I need to calculate values in other cells when there is a change event on the table. I want to use ng-change so that the changes are seen immediately. However, I am unsure of how to properly utilize ng-model - if it is used ...
I am encountering an issue with the following script: <script type="text/javascript"> $.getJSON("http://api.twitter.com/1/statuses/user_timeline/koawatea.json?count=1&include_rts=1&callback=?", function(data) { $("#headertweet") ...
My current challenge involves setting up a hardcoded authentication in React for user login using a form. Despite meeting the requirements for the "if" statement, it always returns the "else" statement. I am attempting to pass both the handleSubmit functi ...
I'm facing an issue with adding buttons to a Leaflet popup that appears when clicking on the map. My goal is to have the popup display 2 buttons: Start from Here Go to this Location The desired outcome looks like this sketch: ___________________ ...
Looking for assistance on a project involving a Raspberry Pi, an external button with GPIZero on Linux, and Python. I want to achieve the following functionality: when the button is pressed, Python should print "button is pressed" once, and then not print ...
I encountered a mutation that looks like this- mutation signUp($avatar: Upload!) { signUp( avatar: $avatar input: { name: "Siam Ahnaf" email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail= ...