How to write the Javascript that gives each link a custom URL to jump to on click according to it's child element's text contents?

Question

I wonder if it is possible to write a Javascript that gives each link a custom format URL to go to on click.

<!-- example set one -->
<a href="javascript:myfunction()" class="relative-url" target="_blank">
  <span id="input01">campfire<span>
  <span id="input02">red<span>
</a>
<!-- example set two -->
<a href="javascript:myfunction()" class="relative-url" target="_blank">
  <span id="input01">pepe<span>
  <span id="input02">green<span>
</a>

How to write the custom javascript to formulate an URL for each <a class="relative-url"> ?

<script>
 // use text content of child element id=input01 and id=input02 to 
 // formulate an URL for it's parent div or <a>
 // eg. https://www.example.com?type=campfire&color=red
 // eg. https://www.example.com?type=pepe&color=green
</script>

Any good idea? Thanks a lot~

Answer 1

If you want to do it at runtime, you could do something like this. I used jQuery since you tagged it in your question.

 $('.relative-url').each(function() { let type = $(this).find('.input01').text(); let color = $(this).find('.input02').text(); this.href = `https://www.example.com?type=${type}&color=${color}` });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- example set one --> <a class="relative-url" target="_blank"> <span class="input01">campfire</span> <span class="input02">red</span> </a> <br/> <!-- example set two --> <a class="relative-url" target="_blank"> <span class="input01">pepe</span> <span class="input02">green</span> </a>

Answer 2

While you've already accepted an answer I thought I'd offer a non-jQuery approach in case that might be of help; explanatory comments are in the code:

 // caching a refernce to the document, and some helper functions as I don't // enjoy repetitive typing all that much: const D = document, get = (sel, ctx = D) => ctx.querySelector(sel), getAll = (sel, ctx = D) => [...ctx.querySelectorAll(sel)], // a simple function to update an element with new properties ('props'): update = (elem, props) => Object.assign(elem, props), // a named function that takes an element (though it realistically // should be a HTMLAnchorElement): createURL = (elem) => { // here we use destructuring to declare the variables of type and color // to the text-content of each of the <span> elements found within the // current element, after we trim the leading/trailing white-space: let [type, color] = getAll('span', elem).map((el) => el.textContent.trim()); // calling the update() function, passing in the current element // and an object of properties to update with the new property-value: update(elem, { href: `${elem.href}?type=${type}&color=${color}` }); }; // retrieves all <a> elements in the document, and iterates over that Array // of nodes and calling the createURL() function on each of them: getAll('a').forEach(createURL);

 *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } a { display: block; padding: 0.25em 0.5em; border: 1px solid currentColor; border-radius: 0.6em; color: #363; margin: 1em auto; inline-size: fit-content; } a::after { content: '(URL: "' attr(href) '")'; }

 <!-- example set one --> <a href="#" class="relative-url" target="_blank"> <span>campfire</span> <span>red</span> </a> <!-- example set two --> <a href="#" class="relative-url" target="_blank"> <span>pepe</span> <span>green</span> </a>

JS Fiddle demo .

References:

• Array.prototype.forEach() .
• Destructuring assignments .
• document.querySelector() .
• document.querySelectorAll() .
• Element.querySelector() .
• Element.querySelectorAll() .
• Object.assign() .