Using javascript's indexOf on an array of svg text elements

javascript syntax
javascript code
javascript codes examples
javascript introduction
javascript function
javascript examples with source code
w3schools
html javascript

I am working with an svg file which has a number of text elements within it. The text elements are all numbers. I am able to get the list of values and put them into an array with the following line of code.

var fretdata = document.getElementById("fretinformation").getElementsByTagName("text");

I am able to access .length property and also the access the array elements by index such as [0].textContent. However, when I try to use the .indexOf() function on the array, I receive an error message that the object (my array) does not support the property or method of indexOf.

I am able to setup a for loop to iterate through the array checking each value looking for the presence or absence of a certain value. I would like something with the simplicity of the indexOf functionality which tells me whether or not something is present within the array and where it is if present. Is there a to get .indexOf() working with the svg text element array? Or is there a similar alternative which does not require the use of loops and flags?

I think the problem lies in the fact that I have an array of text elements and not an array of strings. But I'm not sure how to directly get the array of the text element's textContent

var fretdata = document.getElementById("fretinformation").getElementsByTagName("text");
  //var fretdata = document.getElementById("fretinformation").getElementsByTagName("text").textcontent;

  //18th fret is the upper fret limit
  //0 fret (open string) is the lower fret limit

  //var zerolocation=fretdata.indexOf("0");
for (fd=0;fd<fretdata.length;fd++){
      if(fretdata[fd].textContent=="0"){
          document.getElementById("downkey").setAttribute("onclick",null);
          document.getElementById("downkey").getElementsByTagName("polygon")[0].style.fill="#D3D3D3";
      }
}

Iterating in the loop works. The two lines commented out using the .indexOf do not. Thanks, --christopher

Iterating the elements is really an option, but if you don't like it, you may have 2 more options depending on your setup:

The following code requires map function (check compatibility here, it basically requires IE9+) and slice function compatibility (same, IE9+).

var fretdata = document.getElementById("fretinformation").getElementsByTagName("text");
alert([].slice.call(fretdata).map(function(o) { return o.textContent; }).indexOf("1"));

The other one requires jQuery, it handles a lot of stuff for you.

alert($( "#fretinformation > text" ).filter(function() { return $(this).text() === "1"; } ).length);

JavaScript Examples, JavaScript is the programming language of HTML and the Web. While using this site, you agree to have read and accepted our terms of use, cookie and  using JavaScript. You did this by first using a function called querySelector() to grab a reference to your heading, and store it in a variable called myHeading . This is very similar to what we did using CSS selectors.

What you have is not an array, it's a nodeList.

A nodeList has length, and is array-like, but array methods like indexOf, forEach etc. doesn't work on nodeLists.

You can convert a nodeList to an array like this

var array = Array.prototype.slice.call(fretdata);

but in your case you really shouldn't, you should stick to the iteration instead.

JavaScript Tutorial, Using innerHTML. To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the  HTML tags create objects; JavaScript lets you manipulate those objects. For example, you use the HTML <BODY> and </BODY> tags to create a Web page, or document. As shown in Table 1, after that document is created, you can interact with it by using JavaScript.

use ES6 spread operators

var fretdata = [...(document.getElementById("fretinformation").getElementsByTagName("text"))]

This internally works as

var array = Array.prototype.slice.call(fretdata);

JavaScript Output, using JavaScript. You did this by first using a function called querySelector() to grab a reference to your heading, and store it in a variable called myHeading . Javascript wears many hats. You can use JavaScript to create special effects. You can use JavaScript to make your HTML pages "smarter" by exploiting its decision-making capabilities. And you can use JavaScript to enhance HTML forms. This last application is of particular importance.

JavaScript basics, The concepts covered in these lessons lay the foundation for using JavaScript in any environment. Up Next: After learning JavaScript basics (up through the  JavaScript Can Change HTML Content. One of many JavaScript HTML methods is getElementById(). This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript":

Introduction to JavaScript, The things we tell software using a programming language could be to make a webpage look a certain way, or to make an object on the page  Nowadays almost all web pages contain JavaScript, a scripting programming language that runs on visitor's web browser. It makes web pages functional for specific purposes and if disabled for some reason, the content or the functionality of the web page can be limited or unavailable.

Web Design 101: How HTML, CSS, and JavaScript Work, After validating using JavaScript, In output display proper error messages in red color just next to the textbox where there is an error. Solution  Learn JavaScript or free with our easy to use input output machine. JavaScript.com is a resource for the JavaScript community. You will find resources and examples

Comments
  • Thanks. I ended up iterating through once and pushed each textContent value into an array so that I could use indexOf to easily determine if a value was not in the array.