The function getattribute() on the edge is malfunctioning and returning a null value

Has anyone encountered issues with the getAttribute() function while creating an extension for Edge? I am currently facing a problem where it is not returning the attributes of the element that I am searching for.

This is what my code looks like on Edge and Chrome:

  • Edge Outcome: null when using 
    document.head.getAttribute("data-xd-id") ;
  • Chrome Outcome: AAggv0A when using 
    document.head.getAttribute("data-xd-id") ;

While Chrome correctly returns the expected outcome, Edge seems to deny access to these elements/IDs. Is there a workaround to this issue?

Head Details:

You can view the head markup by visiting or check it out here:

<head data-info="lots of stuff here" ... data-xd-id="AAggv0A" data-delayed-js="...
javascriptmicrosoft-edgemicrosoft-edge-extension

Answer №1

If you need to access the custom data- attributes within an HTMLElement, it is recommended to utilize the dataset property.

For example:

  • document.head.dataset allows you to retrieve all data- attributes as an Object from the <head> tag.
  • document.head.dataset["xd-id"] can be used to obtain the value of data-xd-id from the <head> tag.

Visit Mozilla for more information:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

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

Include a character in a tube using Angular

Hey everyone, I have a pipe that currently returns each word with the first letter uppercase and the rest lowercase. It also removes any non-English characters from the value. I'm trying to figure out how to add the ':' character so it will ...

javascriptangulartypescriptpipe

A method that sorts an array of objects based on their properties

I am currently working with two specific objects: clinics: [ { id: 1, name: 'New Hampshire Veterinarian Clinic', plans: [ 'handle123', 'handle567', ] }, { ...

javascriptvue.jsvuejs3

Errors in Data Capture from AJAX Dropdown Selections

Recently, I've encountered an issue with one of my data fields while attempting to save it to a mySQL database. The problem seems to be related to the fact that the 'id' for the text value is saved instead of the actual text value itself, wh ...

phpjavascriptajaxgoogle-maps-api-3

the JavaScript anchor feature is malfunctioning

Steps to Play Back: To start, in the header section, select any of the links with anchors: ##bankaccount #pack #platform #acq ##scorecard ##intrade #form Next, scroll up to the top of the page Then, reload the page Actual Outcome: Upon reloading a page w ...

javascriptreactjs

What causes these queries to function separately but fail when combined?

I am facing an issue with combining 2 queries in my Firestore collection. These are the 2 examples that work: database .collection('servicebonnen') .where('medewerker', '==', 'CEES') and: database .collecti ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Including a unicode escape sequence in a variable string value

I'm struggling to find the right way to include a unicode escape in a dynamic string value to display emojis in React. My database stores the hexcode for the emoji (1f44d) I have set up a styled-component with the necessary css for rendering an emoj ...

javascriptreactjsunicodeescapingnext.js

Camera Capacitor designed to eliminate popup notifications

I am utilizing Angular along with the camera plugin in Capacitor to locally save images on both desktop and tablets. I aim to utilize the CameraSource to directly access the camera or open the gallery for files without displaying a prompt. This is how my ...

javascriptangularionic-frameworkcapacitor

The JSON data fails to load upon the initial page load

I am having trouble getting JSON data to display in JavaScript. Currently, the data only shows up after I refresh the page. Below is the code I am using: $(document).ready(function () { $.ajax({ url:"http://192.168.0.105/stratagic-json/pr ...

javascriptjqueryhtmljson

Parent function variable cannot be updated within a $.ajax call

I'm facing an issue with pushing a value from inside an ajax call to an array located outside of the call but still within the parent function. It appears that I am unable to access or update any variable from inside the ajax success statement. Any as ...

javascriptphpjqueryajax

bootstrap used for creating horizontal radio buttons

I'm attempting to horizontally align radio buttons within a form without relying on the Bootstrap library. The following code achieves this: <form id="test_form"> <div class="control-group"> <label for="Q1">First question</ ...

javascripthtmltwitter-bootstrap

Using Ajax.BeginForm with BeforeSend functionality

My MVC website has multiple Ajax.BeginForm elements, and I am looking to handle the beforeSend event of my Ajax calls. While the code below works for manual jquery ajax calls, it does not seem to work with the Ajax.BeginForm helpers: $.ajaxSetup({ &a ...

javascriptjqueryajaxasp.net-mvc

Utilize a single function to toggle the visibility of passwords for multiple fields upon clicking

Is there a way to optimize the function used to hide passwords for multiple fields when clicked? Instead of having separate functions for each field, I would like to have one function that is only active on the clicked button. For example, if the toggle ...

javascript

"Figuring out a way to include a link with each image in a react-s

I am currently working on a project in Gatsby and encountering some issues with the homepage banner. I am using react-slick which seems to be functioning fine, but when I try to add content on top of each image, it causes some problems. Specifically, setti ...

javascriptreactjsgatsbyreact-slick

JavaScript's inability to properly export CSV data containing the "#" character has been causing issues

When exporting JSON data to CSV format and downloading it using JavaScript, everything typically works fine. However, there is a problem if the data contains the hash sign #. The function fails to export all the data in that case, for example: This is my ...

javascriptexport-to-csv

Nested loop combining Callback and Promise with two API requests

I apologize for the lackluster title, but I couldn't come up with anything more suitable. If this issue has already been addressed, please let me know in the comments and I will delete it promptly. However, keep in mind that this is a specific questio ...

javascriptecmascript-6es6-promise

Navigating the terrain of multiple checkboxes in React and gathering all the checked boxes

I am currently developing a filter component that allows for the selection of multiple checkboxes. My goal is to toggle the state of the checkboxes, store the checked ones in an array, and remove any unchecked checkboxes from the array. Despite my attemp ...

javascriptreactjstypescriptreact-hooksreact-state-management

Display a loading spinner with ReactJS while waiting for an image to load

I am working on a component that renders data from a JSON file and everything is functioning correctly. However, I would like to add a loading spinner <i className="fa fa-spinner"></i> before the image loads and have it disappear once the ima ...

javascriptjsonreactjs

javascript, contrasting functions and variables

As I delve into the world of Javascript and JQuery (hence why I chose the example below), I have observed an interesting behavior. I noticed that not only can I define a function and call it, but I can also just do something else mysterious by using the do ...

javascript

The type 'Dispatch<SetStateAction<boolean>>' cannot be assigned to type 'boolean'

Currently, I am attempting to transfer a boolean value received from an onChange function to a state variable. let [toggleCheck, setToggleCheck] =useState(false);` <input type="checkbox" id={"layout_toggle"} defaultChecked={toggleCh ...

javascriptreactjstypescriptreact-hooks

Passing data from a child component to a parent component in Vue 3: How

Struggling with Vue 3 app authentication through event-emission from child to parent. Below is a snippet of the code: Child <template> <form class="msform"> <input @click="goToLogin" type="button" name=&q ...

javascriptvue.jsvue-component