retrieve the path attribute value using SVG

Upon inspection in Chrome DevTools, the following html code was found:

<path class="link" d="M0,130C65,130 65,65 130,65"></path> 
<path class="link" d="M0,130C65,130 65,195 130,195"></path>

Despite defining two distinct lines in the html, attempting to access the value of the <path> tag in javascript using:

console.log($('path')[0].attributes.d.value); 
console.log($('path')[1].attributes.d.value);

Resulted in:

M0,730C0,730 0,730 0,730

M0,730C0,730 0,730 0,730

Both lines had the same value. This raises the question of why two different lines have identical values when accessed in this manner.

Initially tested within 

$(document).ready(function () {})
, which still yielded the same incorrect results. However, when placing the console.log inside an "on-click" function, the correct values were returned. This suggests a potential issue with initialization.

javascripthtmlcssd3.jssvg

Answer №1

Here is the accurate way to implement it:

let selectedElement = $("path[class='text']");

    console.log(selectedElement[0].attributes[1].nodeValue);
    console.log(selectedElement[1].attributes[1].nodeValue);

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

Insert a variety of pictures into divs that share the same class

Can I target div elements with the same class in CSS and apply unique styles to each? Here is my HTML: <div class="image"><br/>a</div> <div class="image"><br/>b</div> <div class="image"><br/>c</div> ...

htmlcss

Angular is responsible for generating excessive space

I have a component called members that contains individual member components. When I use the members component as static code, everything works fine: <div class="row bg-light justify-content-center py-4"> <div class="col-lg-8"> <h3 c ...

htmlcssangularbootstrap-4

Create a hover effect for a list item that displays an image and text simultaneously

Is there a way to create an on-hover effect for my icon when hovering over a list item in my dropdown menu? I've shared a codepen link where you can see the issue I'm facing. Everything highlights except the image because I'm only changing ...

htmlcsshover

Is there a way to verify if all the div elements are set to display as none?

If all div elements are set to display:none, I want to display a message saying "No result found" element.each(function(i, el) { if (all elements are set to display:none) { no result found } } <div class="a" data-key="a ...

htmljquery

Can someone guide me on running a JavaScript code in Python with the help of Selenium?

My attempt to extract information using Selenium involved the following code: from selenium import webdriver # $ pip install selenium from selenium.webdriver.chrome.options import Options path = 'C:/Users/Жираслан/Downloads/chromedriver_win3 ...

javascriptpythonseleniumparsinghtml-parsing

sending XML data through Google Maps API V3

While working on integrating the google maps api v3, I encountered an issue when trying to pass an XML file to populate the map with results. Upon checking the PHP file responsible for generating the XML data, everything seems to be in order. The PHP file ...

javascriptajaxgoogle-mapsgoogle-maps-api-3

JavaScript's ASYNC forEach function not following the expected sequence

I'm really struggling to understand the workings of async and await in this scenario. I want the forEach function to run before the console.log and res.json, but no matter what I do with async and await, it always ends up being the last thing executed ...

javascriptnode.jsexpress

Exploring the option of eliminating the email field from the PHP redirect function and transforming it into a pop-up notification

I am currently utilizing the following code to send an email notification to my address whenever a new user signs up: <?php $errors = ''; $myemail = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0ded1ddd ...

phpjavascriptformsemailhttp-redirect

The AJAX request for JSON data is functioning correctly in Firefox, but is experiencing compatibility issues with other web browsers

I recently completed a PHP page that generates a valid JSON document. The jQuery code used to fetch and display the data is quite straightforward: $.ajax({ url: "http://localhost:8888/rkm/json-jc", dataType: "json", success: function(data) { ...

javascriptjqueryajaxjsonfirefox

Which is quicker in JavaScript: appending a string or an array?

Which one is quicker? let str = ''; for(let i=0; i<1000; i++) { str += i; } or let arr = []; for(let i=0; i<1000; i++) { arr.push(i); } let str = arr.join(''); I am curious about the speed difference between these two ...

javascriptarraysstringconcatenationstring-concatenation

Any ideas on how to align the links in the navbar at the center of the image instead of having them at the top?

<!DOCTYPE html> <html> <head> <title>Funky Munky Arcade</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha ...

htmlcsstwitter-bootstrap

Using babel with node.js version 18 allows you to easily import modules with various extensions and run them from the build folder configured with commonJS. Ensure that you have specified "type:module"

I'm currently utilizing Node.JS version 18.20.4 alongside Babel. Below is my babel.config.json: { "presets": [ [ "@babel/preset-env", { "targets": { "node": 18 }, ...

javascriptnode.jsnpmbabeljs

Having trouble with SCSS in Angular 4 CLI after adding new CSS styles?

After successfully creating a fresh Angular project using the Angular CLI for Angular 4, I decided to generate it with SCSS: ng new myproject --style=sass Everything went smoothly until I attempted to add some CSS code. For instance, when I added the fo ...

javascriptangularangular-cli

Error encountered: JSON parsing failed due to an unexpected token 'm' at the beginning of the data while

I am brand new to coding and am currently trying to follow the lecturer's instructions on webpacks. However, every time I attempt to use the command "npx webpack", I encounter this error message: "/home/ubuntu/workspace/assignment1/hellowp/webpack.con ...

javascriptjquerycssjsonsyntax

Retrieve a collection of JavaScript primitive data types in a systematic manner

Is there a way in JavaScript to programmatically access a list of primitive types or determine if a string is a type? This question focuses on language features rather than specific algorithms. Instead of manually creating an array like ['string&apos ...

javascripttypescript

The DataTable is encountering difficulties with processing JSON data retrieved from the database

Setting up a datatable on my website has been quite the challenge. I came across a table that I wanted to use here, but converting it to fit my needs has not been successful. Currently, the table is not populating with rows from a database table and I&apos ...

javascriptphpjsonajaxdatabase

Struggling with finding the appropriate CSS selector?

I'm struggling to find the correct selector. Let me do my best to explain the situation: I am currently working on a project where I am unable to make changes to the HTML and JavaScript due to dynamic content and other constraints. Within this proj ...

htmlcss

Tips for placing the footer at the bottom of the page and ensuring it is pushed below the content as the amount of content increases

I am struggling to position the footer on my webpage at the bottom of the screen when there is limited content. If the content height exceeds the screen height, I want the footer to flow below the content instead of staying fixed at the bottom. Despite tr ...

htmlcsscss-positionsticky-footer

Encountered an Ajax issue while initializing a datatable on a table inside a modal dialog

I have a modal that contains a search box. When the search button is clicked, an ajax call is made to the controller to retrieve a table of results, which are then inserted into a div like this: $.ajax({ url: url, data: JSON.stringify(viewModel), ...

javascriptjqueryhtmlajaxdatatables

Rearrange elements in an array

Currently, I have an array of sphere meshes and I am looking for a way to position them in a level. The meshes are currently set in a specific position (in the shape of a skeleton), but I would like to move the entire array and place it in a different loca ...

javascriptthree.js