Acquiring the selector value from a tag

To summarize:

This snippet of code:

for(let i = 0; i <= items.length; i++){
    console.log(items[i])
}

Produces the following output:

<a class="photo ajax2" target="_blank" href="/profile/show/3209135.html" data-first="1" data-next="3206884">
<a class="photo ajax2" target="_blank" href="/profile/show/3206884.html"  data-next="3209135">
<a class="photo ajax2" target="_blank" href="/profile/show/3209135.html" data-next="3209755">

I would like to extract the values of data-next from all the links. How can I achieve this? I attempted the following code:

for(let i = 0; i <= items.length; i++){
    console.log(items[i].querySelector('a["data-next"]'));
}

Unfortunately, this method did not work. I am looking for a solution using only vanilla JavaScript.

ANSWERED

javascript

Answer №1

items[i] is a reference to the actual element itself, so if you use querySelector() on it, you will get nothing. Instead, try using getAttribute():

console.log(items[i].getAttribute("data-next"));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlocking ajax components using django

Currently, I am utilizing AJAX to retrieve Django model data and display the results. In my views.py file: def browse_jobs(request): keyword = request.GET.get('keyword', None) company = Company.objects.filter(title__icontains=keyword) ...

javascriptjqueryajaxdjango

Textbox textchange event triggers Javascript function when Checked=True

$('.LblQTY').on('input', function () { var currentRow = $(this).closest('tr'); var rate = parseFloat(currentRow.find('.LblRate').text()); var quantity = parseFloat($(this).val() == '' ? '0& ...

javascriptjqueryhtml

Adjust the position of the footer up or down based on changes in page content height

If I have jQuery at my disposal, how can I achieve the following task? There is a div on the page with dynamic content and no fixed height. The height of this div changes as users type and content appears or disappears accordingly. Although everything is ...

javascriptjqueryweb

Manipulating front matter metadata when reading/writing a markdown file in Node.js

I have a large collection of markdown files that I need to update by adding new data to their front matter metadata. Currently, the file structure looks like this: --- title: My title here --- Markdown content here My goal is to include an id property ...

javascriptnode.jsmarkdown

Transferring information in React from a child component to its parent and then to another child

I'm currently developing my app using react.js and facing an issue with passing data between components. I have a Parent component (P) that needs to receive an array of objects from its child component (C1), then pass this data on to another child com ...

javascriptajaxreactjsfrontend

What drawbacks come with developing an Express.js application using TypeScript?

Curious about the potential drawbacks of using TypeScript to write Express.js applications or APIs instead of JavaScript. ...

javascriptnode.jstypescriptexpress

The React onChange event fails to trigger

Why isn't the onChange event firing in the input tag? I used LinkedStateMixin to track the input value before, but now I want to add an onChange event to run a function. After removing LinkedStateMixin, the onChange event still doesn't fire. I ev ...

javascriptreactjs-flux

Creating a carousel of cards using JavaScript, CSS, and HTML

Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicke ...

javascripthtmlcsscarousel

Failed submission: XMLHttpRequest and FormData not processing data correctly

I'm attempting to use AJAX to submit a form using the post method along with a FormData object. Here's a simplified version of the JavaScript code: var form=…; // form element var url=…; // action form['update'].onclick=function ...

javascriptphpajaxxmlhttprequestform-data

What steps can I take to modify my webpage, like a dashboard, on the internet?

Whenever I click on a menu item in the sidebar of my HTML file, I want only the body section to change without affecting the navigation or sidebar content. For instance, if I select the "Coding Convention" menu in the sidebar, I would like the page to swi ...

javascriptjqueryhtmlajaxweb

Managing all mouse interactions simultaneously in ReactJS

I've successfully created a button: <button className='collapse-button' onClick={() => {setTopNavigationBarCollapse(!topNavigationBarCollapse)}}>&#9776;</button> Now, I'm wondering if there's a way to call the s ...

javascripthtmlreactjs

File writing issues are plaguing NodeJS, with middleware failing to function as well

I am facing a challenge with my middleware that is supposed to write JSON data to a file once the user is logged in. However, I am encountering an issue where no data is being written to the file or displayed on the console when the function is executed. ...

javascriptjsonnode.jsexpress

"The printing function of the "Print page" button appears to be malfunctioning

I am having some trouble with my JavaScript code for a "print page" button in an HTML document. The button appears and is clickable, but it doesn't actually print the page as intended. I keep receiving 3 errors related to the `document` object being u ...

javascripthtml

What is the best way to create an HTML5 Range that gracefully degrades?

I want to incorporate the <input type='range' /> element from HTML5 for modern browsers and fallback to a <select /> if needed. Since I am working with Ruby-on-Rails, as a last resort, I could implement something similar to this on th ...

javascriptjqueryruby-on-railshtmlprogressive-enhancement

The AJAX status is now 0, with a ready state of 4

Struggling to execute an AJAX call (using only JavaScript) to store a user in the database. The JavaScript file I am working with includes this code: var url = "interfata_db.php"; xmlhttp.onreadystatechange = function(){ alert('ready state &apos ...

javascriptphpajax

Mocha Chai: Dive into an array of elements, discovering only fragments of the desired object

Currently, I am utilizing the assert syntax of chai. I have a dilemma regarding checking an array of objects for a specific object. For example: assert.deepInclude( [ { name: 'foo', id: 1 }, { name: 'bar', id: 2 } ], { n ...

javascriptnode.jsmocha.jschai

What is the best way to obtain a list of all the modules that are currently accessible in AngularJS

When declaring an Angular module, I specify its dependencies as follows: const myModule = angular.module("MyModuleName", ["Dep1", "Dep2", "Dep3"]); Each dependency comes with its own set of dependencies, directives, controllers, etc. Is there a way to qu ...

javascriptangularjs

Submit form only if the field value is valid

I created a form with an input field that captures the user's mobile number and validates it to ensure it begins with '0'. The validation process is functioning correctly, but I am encountering a problem when submitting the form. Even if the ...

javascriptjqueryhtmlcss

Ways to utilize a string as an object?

Hey there! I'm just getting started with software development and currently working on an application using React Native. The backend is sending me a large data set, but here's a snippet of it. My challenge is that I want to access the first ele ...

javascriptjsonreact-native

The dynamic data graph generated by HIGHCHARTS Areaspline is not as effective as expected

I need help creating a Dynamic Areaspline graph, but the result is coming out strangely. Does anyone have any ideas on how to fix this and get a smooth series? Here is an example of the issue: http://jsfiddle.net/mchc59nb/1/ chart: { ...

javascriptjqueryhighcharts