Tips for locating the ID of an array element based on the text or value of the element

Question

Tips for locating the ID of an array element based on the text or value of the element

I am trying to identify the span id of elements in an array based on their values. For instance, if the value in the array is "Yellow", I need to determine that the corresponding span's id is "test4". However, I am struggling to figure out how to extract the span id from the text/value within the span tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
    function doFunction(){
    var myArray = ["Green", "Yellow", "Brown"];
    for (i = 0; i < myArray.length; i++) { 
    text = myArray[i];
    alert(text);
    }
    }
    </script>
    <title></title>
  </head>
  <body>
    <span id="test1">Red</span><br>
    <span id="test2">Green</span><br>
    <span id="test3">Blue</span><br>
    <span id="test4">Yellow</span><br>
    <span id="test5">Orange</span><br>
    <span id="test6">Brown</span><br>
<button name="button" onclick="doFunction()">Click Me</button>    
  </body>
</html>

javascript arrays element getelementbyid

Answer 1

Answer №1

function executeFunction(){
var colorsArray = ["Red", "Blue", "Orange"];
var spanElements = document.getElementsByTagName("span");
for (var i = 0; i < spanElements.length; i++) { 
       if(colorsArray.indexOf(spanElements[i].innerHTML) > -1){
           alert(spanElements[i].id);
       }
   }
}

Try it out: http://jsfiddle.net/4rZ5h/

This script utilizes indexOf, so it's recommended to have a polyfill for IE<9 compatibility

Answer 2

function executeFunction(){
var colorsArray = ["Red", "Blue", "Orange"];
var spanElements = document.getElementsByTagName("span");
for (var i = 0; i < spanElements.length; i++) { 
       if(colorsArray.indexOf(spanElements[i].innerHTML) > -1){
           alert(spanElements[i].id);
       }
   }
}

Try it out: http://jsfiddle.net/4rZ5h/

This script utilizes indexOf, so it's recommended to have a polyfill for IE<9 compatibility

Answer 3

Answer №2

The best approach would be to start by obtaining a list of all the spans, possibly using the querySelectorAll method. Next, iterate through the list and check the innerHTML of each span to find any matches.

One way to retrieve the list is as follows:

// Locate all spans with `id` attributes starting with "test"
var spanList = document.querySelectorAll("span[id^=test]");

(It is recommended to assign a class to the spans and use that for selection instead of the attribute query.)

Then, within your loop through the values in your array, loop through the span list.

var index;
for (index = 0; index < spanList.length; ++index) {
    if (value === spanList[index].innerHTML) {
        // a match is found
    }
}

To consolidate the steps, consider the following:

function checkMatches(){
    var dataArray = ["Red", "Blue", "Orange"];
    var spanList = document.querySelectorAll("span[id^=test]");
    var index, value, j;
    for (j = 0; j < dataArray.length; j++) { 
        value = dataArray[j];
        for (index = 0; index < spanList.length; ++index) {
            if (value === spanList[index].innerHTML) {
                // this span meets the criteria
            }
        }
    }
}

Additional point: In the code snippet above, there are explicit var declarations for j and value. This practice helps avoid issues related to Implicit Global Variables.

Answer 4

The best approach would be to start by obtaining a list of all the spans, possibly using the querySelectorAll method. Next, iterate through the list and check the innerHTML of each span to find any matches.

One way to retrieve the list is as follows:

// Locate all spans with `id` attributes starting with "test"
var spanList = document.querySelectorAll("span[id^=test]");

(It is recommended to assign a class to the spans and use that for selection instead of the attribute query.)

Then, within your loop through the values in your array, loop through the span list.

var index;
for (index = 0; index < spanList.length; ++index) {
    if (value === spanList[index].innerHTML) {
        // a match is found
    }
}

To consolidate the steps, consider the following:

function checkMatches(){
    var dataArray = ["Red", "Blue", "Orange"];
    var spanList = document.querySelectorAll("span[id^=test]");
    var index, value, j;
    for (j = 0; j < dataArray.length; j++) { 
        value = dataArray[j];
        for (index = 0; index < spanList.length; ++index) {
            if (value === spanList[index].innerHTML) {
                // this span meets the criteria
            }
        }
    }
}

Additional point: In the code snippet above, there are explicit var declarations for j and value. This practice helps avoid issues related to Implicit Global Variables.

Answer 5

Answer №3

If you iterate through each span element and check if they exist in your array, you can then display their ID if they do.

function checkSpans(){
    var colorsArray = ["Green", "Yellow", "Brown"];

    // Get all span elements
    var spans = document.getElementsByTagName('span');

    // Loop through each span
    for (var i = 0; i < spans.length; i++) {
        // Check if the value is in the array
        var index = colorsArray.indexOf(spans[i].innerHTML);
        // If it is
        if(index != -1){
           // Show the text and the ID
           alert(colorsArray[index] + ' : ' + spans[i].getAttribute('id'));
        }
    }
}

JS Fiddle

Answer 6

If you iterate through each span element and check if they exist in your array, you can then display their ID if they do.

function checkSpans(){
    var colorsArray = ["Green", "Yellow", "Brown"];

    // Get all span elements
    var spans = document.getElementsByTagName('span');

    // Loop through each span
    for (var i = 0; i < spans.length; i++) {
        // Check if the value is in the array
        var index = colorsArray.indexOf(spans[i].innerHTML);
        // If it is
        if(index != -1){
           // Show the text and the ID
           alert(colorsArray[index] + ' : ' + spans[i].getAttribute('id'));
        }
    }
}

Tips for locating the ID of an array element based on the text or value of the element

Answer №1

Answer №2

Answer №3

JS Fiddle

Similar questions

Node.js - Issue with res.json function: inconsistency across different routes

Storing the radio button's selected value in local storage using Vue JS

Displaying live IP CAMERA feed using three.js

Angular 2: Enhancing Textareas with Emoji Insertion

Sending JSON Data from C# to External JavaScript File without Using a Web Server

Renew Firebase Token

Can a double array be classified as an object?

Leveraging event listeners in conjunction with React's useEffect function

The 'fetch' operation could not be completed on the current window due to a TypeError

PHP AJAX Request Failing to Transfer Files

Sending two objects back in res.send() in an API: A step-by-step guide

Mystifying WebPack sourcemaps lead to duplicated files

Error: An unexpected symbol '||=' was found

Creating a decorative ribbon in three.js for your gift presentation

The styles from the npm package are not being properly applied to the class

Having trouble initiating the server using npm start

Creating a function to manipulate an element on a different webpage

How to clear a 24-hour-old template from the Angular 1 cache?

Display hyperlinks upon hovering over text

Guide to adding the initial element in an array using Immutability Helpers