Tips for reusing a JavaScript-generated class across a webpage multiple times

Question

Tips for reusing a JavaScript-generated class across a webpage multiple times

I'm currently working on a script that reads a text file and generates an HTML link using a temporary email address.

<script>
//<![CDATA[
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        document.getElementsByClassName('temporary_email')[0].innerHTML = "<a href=\"mailto:" + xhttp.responseText + "\">Email</a>";
      }
    };
    xhttp.open("GET", "/temporary_email.txt", true);
    xhttp.send();
//]]>
</script>

Everything is functioning as planned, allowing me to insert the

<span class="temporary_email"></span>

code snippet anywhere for the link to be displayed.

The issue: I've noticed that I am only able to fetch the email address once. If I have a mailto: link in the body and another one in the footer, the script fails to work. This leads me to believe that there may be something wrong with the way I am handling variables since I am not very experienced with JavaScript yet.

PS: I am attempting to avoid using jQuery. I have tried several simple solutions like duplicating the script and giving it a different name for document.getElementsByClassName, but without success. Essentially, I am looking for a quick and basic workaround until I gain enough knowledge in JavaScript to resolve this issue properly.

javascript html css file include

Answer 1

Answer №1

The issue why the JS is only added to the first instance of the class name match is because

document.getElementsByClassName()

returns an array of matched elements.

When you use

document.getElementsByClassName('temporary_email')[0]

, it will always target the first matching element.

To resolve this, you must update your code as follows:

var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {

          if (xhttp.readyState == 4 && xhttp.status == 200) {
              var elements = document.getElementsByClassName('temporary_email');

              for (var i = 0; i < elements.length; i++) {
                  elements[i].innerHTML = "<a href=\"mailto:" + xhttp.responseText + "\">Email</a>";
              }  
          }
    };
    xhttp.open("GET", "/temporary_email.txt", true);
    xhttp.send();

Here's a simple fiddle example.

This method allows you to loop through the array and update each element's innerHTML accordingly. Best of all, no jQuery needed!

Answer 2

The issue why the JS is only added to the first instance of the class name match is because

document.getElementsByClassName()

returns an array of matched elements.

When you use

document.getElementsByClassName('temporary_email')[0]

, it will always target the first matching element.

To resolve this, you must update your code as follows:

var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {

          if (xhttp.readyState == 4 && xhttp.status == 200) {
              var elements = document.getElementsByClassName('temporary_email');

              for (var i = 0; i < elements.length; i++) {
                  elements[i].innerHTML = "<a href=\"mailto:" + xhttp.responseText + "\">Email</a>";
              }  
          }
    };
    xhttp.open("GET", "/temporary_email.txt", true);
    xhttp.send();

Here's a simple fiddle example.

This method allows you to loop through the array and update each element's innerHTML accordingly. Best of all, no jQuery needed!

Answer 3

Answer №2

To update all your temporary_email links, you can iterate through each one and make the necessary changes:

Array.from(document.getElementsByClassName('temporary_email'))
  .forEach(function(el){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        el.innerHTML = "<a href=\"mailto:" + xhttp.responseText + "\">Email</a>";
    }
    };
    xhttp.open("GET", "/temporary_email.txt", true);
    xhttp.send();
  })

Answer 4

To update all your temporary_email links, you can iterate through each one and make the necessary changes:

Array.from(document.getElementsByClassName('temporary_email'))
  .forEach(function(el){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        el.innerHTML = "<a href=\"mailto:" + xhttp.responseText + "\">Email</a>";
    }
    };
    xhttp.open("GET", "/temporary_email.txt", true);
    xhttp.send();
  })

Tips for reusing a JavaScript-generated class across a webpage multiple times

Answer №1

Answer №2

Similar questions

What is the process for incorporating shaders into a multi-camera renderer in Three.js?

Ways to implement CSS for limiting the scrollable width of a div element in a web browser

The menu does not adjust to fit the site properly, causing the video/photos to appear off to the right on smaller screens

Open a customized form in jqGrid when the 'Edit' button is clicked, then refresh the row after editing

What is the process behind Twitter's ability to quickly show my profile?

Is there a way to perform file write/delete/read operations in Python on a different user account sharing the same IP address?

The hover effect for Box-Shadow does not appear to be functioning properly in Internet Explorer

Looking for assistance in streamlining the code

Incorporate photo thumbnails into Material UI cards

Issue Setting Cookies on "localhost" versus "127.0.0.1" Domain - Cookies Disappear Upon Refresh

The position of the parent element's bounding box in relation to the child element

What is the best method to assign values to AngularJS controller variables using Python Selenium or the JavaScript console?

Display Information in Tooltip Using Text from a Different Source

Responsive websites won't function properly

Generating as many fields as chosen

EJS not displaying object values properly

"Integrating Associated Models with Sequelize: A Step-by-Step Guide

Ways to display object data in a snackbar within an Angular application

Is there a way to arrange list items to resemble a stack?

I am looking to emphasize text in alignment with the slide image