Choosing specific anchors based on their corresponding div ids

Just beginning my journey with JS, looking to tackle an issue (I know, everyone says that!). My task is to create a script that can choose an anchor element and inject an <img>. Nested within a div with the id of _nwa_social_logins, there are multiple <a> tags. I need to append an <img> tag to one of these <a> elements. Not quite sure on the most effective approach for this.

This pertains to a captive portal page generated by a product we utilize, and my area of focus resembles the following snippet:

<div id="_nwa_social_logins">
  <a class="btn btn-facebook" href="<url>/guest/social-media.php?oauth_init=1&amp;oauth=facebook" title="">
    <i class="icon-facebook"></i> Facebook
  </a>
  <a class="btn btn-linkedin" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=linkedin" title="">
    <i class="icon-linkedin"></i> LinkedIn
  </a>
  <a class="btn btn-google" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=google" title="">
    <i class="icon-google"></i> Google
  </a>
  <a class="btn btn-twitter" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=twitter" title="">
    <i class="icon-twitter"></i> Twitter
  </a>
  <a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=azure" title=""><img src="images/icon-microsoft.png" align="middle">Microsoft Azure AD
  </a>
  <a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=amazon" title="">Amazon</a>
</div>

At this point, I've got

let items = document.querySelector('#_nwa_social_logins a');

To be honest, I'm unsure how to verify if anything has been selected.

The goal is to target the Amazon anchor and include an <img> for the button. If the aforementioned selection yields a collection of <a> elements, can I iterate through them to identify one with an 'amazon' ending in the href attribute?

Appreciate your help!

javascriptjquery-selectors

Answer №1

Here is a way to achieve that:

<script>
    window.addEventListener('load', () => {

        let socialLinks = document.querySelectorAll('#_nwa_social_logins a');
        socialLinks.forEach((link, index) => {
            if (link.getAttribute("href").toLowerCase().lastIndexOf('amazon') >= 0)
                link.innerHTML = '<img src="customimage">';
        });

    });
</script>

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

Discovering the Active Modal Form in BootStrap: Uncovering the Open Modal Form using JavaScript/jQuery

There are a total of 5 modal forms on my page. My goal is to identify the specific Id of the currently active one. One possible solution involves checking if $('#myModal').hasClass('in');. However, this method requires me to repeat the ...

javascriptjquerytwitter-bootstrap

Puppeteer exhibiting unexpected behavior compared to the Developer Console

My goal is to extract the title of the page using Puppeteer from the following URL: Here's the code snippet I am working with: (async () => { const browser = await puppet.launch({ headless: true }); const page = a ...

javascriptnode.jsweb-scrapingpuppeteer

Changing the texture of a specific GLTF model in Three.js that is being replicated multiple times

Currently, I am loading a GLTF asset and using it in the scene multiple times. I am trying to modify the material color of all meshes inside a specific object that is a GLTF model. traverseMaterials(object, (material) => { material.color.set( ...

javascriptthree.js

Unable to Display Embed Request Using Javascript in IE9 and IE10

My website allows users to embed content they create on the site into their own blogs or pages using a series of embeds. Here is the code we provide them: <script src="[EMBED PROXY URL]" type="text/javascript"></script> When this code calls ...

javascriptinternet-exploreriframeinternet-explorer-9internet-explorer-10

Utilize AJAX or another advanced technology to refine a pre-existing list

I am trying to implement a searchable list of buttons on my website, but I haven't been able to find a solution that fits exactly what I have in mind. Currently, I have a list of buttons coded as inputs and I want to add a search field that will filte ...

javascripthtmlcssajax

Adjust the size of the Threejs canvas to fit the container dimensions

Is there a way to determine the canvas size based on its container in order to prevent scrolling? Setting the size based on the window results in the canvas being too large. ...

javascriptthree.js

Ways to retrieve information from a $$state object

Everytime I try to access $scope.packgs, it shows as a $$state object instead of the array of objects that I'm expecting. When I console log the response, it displays the correct data. What am I doing wrong? This is my controller: routerApp.controll ...

javascriptangularjsnode.jsrestexpress

Reduce the amount of times append is used in JQuery

Whenever I click the button in Jquery, I aim to limit the number of appends that occur. function standardRoom() { var counter = 0; if ($('select#selectBoxStandard option').length > 1) { counter++; $('#selectBoxStandard&ap ...

javascriptjqueryajax

Modifying the value of an animated status bar using the same class but different section

I need the status bars to work individually for each one. It would be great if the buttons also worked accordingly. I have been trying to access the value of "data-bar" without success (the script is able to process the "data-max"). However, the script see ...

javascripthtmljquery

The functionality of scrolling ceases to work once the bootstrap modal is closed

I am utilizing Bootstrap v3.1.1 to showcase a modal popup on one of my web pages. The following code shows how I have implemented it. <!--Start show add student popup here --> <div class="modal fade" id="add-student" tabindex="-1" role="dialog" a ...

javascriptjquerycssajaxtwitter-bootstrap

Utilizing Next.js on Vercel with Sentry and opting out of source maps in the production environment

Currently setting up a Next.js application on Vercel with Sentry configuration thanks to the @sentry/next.js module. You can find an example repo here - https://github.com/voronianski/test-next-sentry-app This setup is based on the official example from N ...

javascriptnext.jssentrysource-mapsvercel

I'm receiving a typeerror when trying to access the uid property of null, even though I don't have any asynchronous code and the users are logged

I am currently working on developing a user profile edit page that redirects users to their unique profile after logging in. However, I keep encountering an error that says Uncaught (in promise) TypeError: Cannot read properties of null (reading 'uid& ...

javascriptfirebasevue.js

What is the best way to exclude a particular character from a text element utilizing jquery?

Looking to extract the numerical value from a div containing: <div class="balance"...>$500.48</div> The goal is to retrieve 500.48 as a number, not a string. One approach is to use alert($(".balance").text()) to verify that the content is ret ...

javascriptjqueryhtml

Activate the button solely when the text field has been populated without any spaces

Searching for a solution to my query, but all the suggestions I've encountered don't consider spaces as valid input. In the join function I have, the button should be disabled if the user enters only spaces. A requirement is for actual text inpu ...

javascriptjqueryhtml

What is the best way to mix up all the characters within the content of an HTML document?

<div id="contentContainer"> <h1>First Page</h1> <section id="mainSection"> <p>Lorem ipsum dolor sit amet</p> <ul> <li><a href="#">Black world</a></li> ...

javascriptdom

Updating the status of a checkbox array within the reducer to reflect changes made in the user interface

I've implemented something similar in React: const CheckboxItems = (t) => [ { checked: true, value: 'itemsCancelled', id: 'checkBoxItemsCancelled', labelText: t('cancellations.checkBoxItemsCancelled&apos ...

javascriptreactjsecmascript-6redux

Is there a problem with AngularJS $state.go() not emitting $stateChangeSuccess?

In my scenario, I have controllers A and B located in different states. When I trigger $state.go('state_b');, Angular switches to state state_b and loads controller B. However, what surprises me is that I do not receive $stateChangeSuccess in my ...

javascriptangularjsangular-ui-routerstate

Executing a jQuery script on various elements of identical types containing different content (sizes)

I am currently working on a jQuery script that will center my images based on the text block next to them. Since I am using foundation 5, I have to use a jQuery script to override the CSS instead of using vertical-align: middle. The script looks like thi ...

javascriptjqueryhtmlcsszurb-foundation

The element div is not permitted as a child of the element h5 in this particular scenario

My code snippet is as follows: $compile .= "<h5 data-count='".$acctemmpi. "' class='shortcode_accordion_item_title expanded_". $expanded_state . "'>" . $title . "<div class='ico'&g ...

javascripthtmlcss

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Seeking assistance in creating a grid of divs, I am working on finding the square root of the user's input to determine the height and width required to form a square. The code below is what I currently have: $('#size').click(function(){ $ ...

javascriptjqueryhtmlcss