Using JavaScript (without jQuery), modify the target of an anchor link based on its text content

Question

Using JavaScript (without jQuery), modify the target of an anchor link based on its text content

I am working with c# code that dynamically generates Anchor tags. I am looking to modify the target attribute of certain anchor tags based on their text.

For example, the HTML code generated by the dynamic c# looks like this:

<a target='_blank' class=txt href="http://www.stackoverflow.com">THE BEST SITE</a>

I would like to change the target attribute if the text is equal to "THE BEST SITE".

Please note: I do not have any jQuery files included in my asp.net project.

So far, I have attempted to include this script in order to get the text, but it does not display the alert message:

$(document).ready(function() {
    $(".txt").click(function() {
        alert($(this).text());
    });
});

javascript

Answer 1

Answer №1

Check out this handy function that verifies whether the innerText of an element matches a specific phrase. If it does, it assigns the target attribute to that particular phrase.

 function updateTarget(element, phrase){
       if(element.innerText === phrase){
         element.target = phrase;
       }
    }

Depending on the structure of your DOM, you can simply loop through all anchor elements and apply this function with the desired phrase.

If you have multiple elements with the .txt class, you can easily handle them like so:

var elements = document.querySelectorAll('.txt');
for(var j = 0; j < elements.length; j++){
  updateTarget(elements[j], "THE GREATEST SITE");
}

Answer 2

Check out this handy function that verifies whether the innerText of an element matches a specific phrase. If it does, it assigns the target attribute to that particular phrase.

 function updateTarget(element, phrase){
       if(element.innerText === phrase){
         element.target = phrase;
       }
    }

Depending on the structure of your DOM, you can simply loop through all anchor elements and apply this function with the desired phrase.

If you have multiple elements with the .txt class, you can easily handle them like so:

var elements = document.querySelectorAll('.txt');
for(var j = 0; j < elements.length; j++){
  updateTarget(elements[j], "THE GREATEST SITE");
}

Answer 3

Answer №2

You may be looking for a solution similar to this:

let elements = document.querySelectorAll('.txt');
elements.forEach(element => {
  if (element.textContent === "THE BEST SITE") {
    element.target = 'something';
  }
});

Answer 4

You may be looking for a solution similar to this:

let elements = document.querySelectorAll('.txt');
elements.forEach(element => {
  if (element.textContent === "THE BEST SITE") {
    element.target = 'something';
  }
});

Using JavaScript (without jQuery), modify the target of an anchor link based on its text content

Answer №1

Answer №2

Similar questions

What causes a component to not update when it is connected to an Array using v-model?

Choosing an option from a PHP MySQL table based on a JavaScript value

Create a new canvas for each iteration of a Vue.JS template loop

What is the process for making changes to a document in Mongoose?

Is it possible to generate an array of objects, where each object includes an observable retrieved through forkJoin?

RxJS Observables trigger the onCompleted function after completing a series of asynchronous actions

Encounter a 401 error code while attempting to fetch data from CouchDB using an AJAX request

Saving Labels in Firebase after receiving a POST request for a separate group in Node.js

The Axios GET Request does not work when inside a while loop

Creating a Website for Compatibility with NoScript

Refresh the input data post verification

The Bootstrap carousel spiraled into disarray

Auto-scrolling text box cursor movement

AngularJS - development of a service entity

Obtain personalized results for implementing in Convase JS from a PHP server

Unable to activate animation within a nested ngRepeat loop

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

What methods can I utilize to expand the qix color library with personalized manipulation features?

Restrict User File Uploads in PHP

Issue with positioning in expanded state of the Packery isotope pack