Add a ? and another string to all outbound links

Question

In this code, I'm modifying all outgoing links. I've added "?" successfully. I also want to add a dynamic string which I'm fetching from a URL but have failed. Here's my code:

fetch('https://httpbin.org/encoding/utf8')
  .then((response) => {
    return response.text();
  })
  .then((text) => {
    document.getElementById("MyFetchedString").innerHTML = text.slice(0, 10);
      });
document.addEventListener( "DOMContentLoaded", modify_outbound_links);

function modify_outbound_links(){
    anchors = document.getElementsByTagName('a');
    for (let i = 0; i < anchors.length; i++) {
        let p = anchors[i].href;
        if (p.indexOf('example.com') === -1) {
        //How do i append the fetchedText here? 
            anchors[i].href = p + (p.indexOf('?') != -1 ? "&" : "?") + 'FetchedText'; 
        }
    }
}

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  </head>

<body>

  <h2>My First Web Page</h2>
  <p>My First Paragraph.</p>

  Modify all outbound links.<br>

 <p><a href="https://google.com/">Google.com</a></p>
<p><a href="https://yahoo.com/">Yahoo.com</a></p>
<p><a href="https://example.com/">mydomain.com</a></p>

<p id="MyFetchedString"></p>

</body>

How do I append the fetchedText here:

anchors[i].href = p + (p.indexOf('?') != -1 ? "&" : "?") + '**I WANT THE FETCHED TEXT HERE**';

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — jonrsharpe, Jan 25 '20 at 20:31

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

The desired functionality can be obtained by these 4 steps -

Remove the event on document load, as it is unnecessary when fetch is included.

document.addEventListener( "DOMContentLoaded", modify_outbound_links);

This event listener interferes with fetch. It can be removed.

Extract the fetched text into a variable named fetchedText in 'fetch request'
Pass fetchedText as an argument to modify_outbound_links function
Append fetchedText to outbound link inside the modify_outbound_links function

Working code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h2>My First Web Page</h2>
    <p>My First Paragraph.</p>
    Modify all outbound links.
    <br>
    <p><a href="https://google.com/">Google.com</a></p>
    <p><a href="https://yahoo.com/">Yahoo.com</a></p>
    <p><a href="https://example.com/">mydomain.com</a></p>
    <p id="MyFetchedString"></p>
    <script>
      fetch('https://httpbin.org/encoding/utf8')
      .then((response) => {
            return response.text();
      })
      .then((text) => {
            console.log("Response from httpbin = " + text)
            var fetchedText = text.slice(4, 16)
            document.getElementById("MyFetchedString").innerHTML = fetchedText
            modify_outbound_links(fetchedText)
      })
      
      function modify_outbound_links(fetchedText) {
          anchors = document.getElementsByTagName('a')
          for (let i = 0; i < anchors.length; i++) {
            let p = anchors[i].href
            if (p.indexOf('example.com') === -1) {
              //How do i append the fetchedText here?
              anchors[i].href = p + (p.indexOf('?') != -1 ? "&" : "?") + fetchedText;
            }
          }
      }
      </script>
  </body>
</html>

Output

My First Web Page My First Paragraph.

Modify all outbound links.

Google.com (link = https://google.com/?Unicode%20Demo)

Yahoo.com (link = https://yahoo.com/?Unicode%20Demo)

mydomain.com (link = https://example.com/)

Unicode Demo

Add a ? and another string to all outbound links

1 Answers1