Error in Chrome: is not a function error has not been caught

Currently, I am developing a userscript for a website and have run into an issue that states 

Uncaught TypeError:  is not a function
specifically in Chrome. Strangely, this error does not appear in Firefox. Despite spending the last hour trying to debug the script, I have yet to find a solution.

To help diagnose the problem within Chrome, I have included relevant code snippets below. The purpose of the script is to locate a button labeled 'Download' and retrieve the associated href link.

function getSubmissionSource(){
  var controlBar = document.getElementsByClassName("button submission rounded");
  for (var button of controlBar) { //errors here
    var link = button.getElementsByTagName("a")[0];
    if (link !== undefined && link.textContent == "Download") {
      return link.href;
    }
  }
}
console.log(getSubmissionSource());
<div id="test"">
  <span class="button submission rounded">
    <a href="/view/18251152/" class="prev dotted">Older</a>
  </span>
  <span class="button submission rounded">
    <a href="">-Remove from Favorites</a>
  </span>
  <span class="button submission rounded">
    <a href="">Download</a>
  </span>
  <span class="button submission rounded">
    <a href="">Note user</a></span>
  <span class="button submission rounded">
    <a href="/view/18385008/">Newer</a>
    </span>
</div>

javascript

Answer №1

To iterate through the nodelist, you must utilize a for loop.

function getSource(){
  var controlBar = document.getElementsByClassName("button submission rounded");
  for (var i=0, len=controlBar.length; i<len; i++) { //this is where errors occur
    var link = controlBar[i].getElementsByTagName("a")[0];
    if (link !== undefined && link.textContent == "Download") {
      return link.href;
    }
  }
}
console.log(getSource());
<div id="test"">
  <span class="button submission rounded">
    <a href="/view/18251152/" class="prev dotted">Older</a>
  </span>
  <span class="button submission rounded">
    <a href="">-Remove from Favorites</a>
  </span>
  <span class="button submission rounded">
    <a href="">Download</a>
  </span>
  <span class="button submission rounded">
    <a href="">Note user</a></span>
  <span class="button submission rounded">
    <a href="/view/18385008/">Newer</a>
    </span>
</div>

Answer №2

The lack of an of operator in JavaScript means you have to make a modification:

for (var button of controlBar) {

needs to be changed to 

for (var button in controlBar) {

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through functions and saving outcomes

I need help creating a function that groups JSON elements based on a specific criteria, but I am having trouble with my loop. The goal is to create groups of 12 bottles and return a single JSON list. For example, in this case, the function should extract ...

javascriptjsonfunctionfor-loopreturn

Testing for expressjs 4 using Mocha revealed unexpected behavior when attempting to spy on a function called within a promise. Despite setting up the

I have encountered a situation with some test cases structured like this: it('does stuff', function(done) { somePromise.then(function () { expect(someSpy).to.have.been.called done() }) }) When the assertion in a test case fails, it ...

javascriptnode.jsexpresspromisemocha.js

Inline Styling with CSS Media Types

Creating a single HTML file is my current project requirement. I am looking to incorporate CSS in order to ensure that links within the document are clearly visible and easy to find (perhaps styled as blue with underlines) when accessed through a web brows ...

javascripthtmlcssmedia-type

Trigger the ReactJS popup mechanism

I'm currently working on customizing the trigger for my React Modal popup. My goal is to have a different element on my website act as the trigger, based on its Class or ID. Is it possible to change the trigger={ Open Modal } to target a specific ele ...

javascriptreactjsgatsby

Guide to modifying CSS properties of an individual element by manipulating class names with JavaScript

I have been searching for an answer to my question without success. I have a unique challenge where I need to change the styles of an h1 element by adding a class based on which radio button is clicked. The issue I'm facing is that when I select a dif ...

javascripthtmlcss

Posting an array of objects using the Axios library: A step-by-step guide

One common issue I'm facing is how to efficiently insert data as multiple rows using an array of JavaScript objects. For example, let's say we have an array named props.email: props.email = [ {email: '<a href="/cdn-cgi/l/email-protectio ...

javascriptreactjsaxios

JavaScript: comparison between browser and native support for setTimeout and setInterval

In the world of programming, JavaScript is but a language that boasts various different implementations. One such implementation is the renowned V8 engine, which finds utility in both Google Chrome and Node.js. It's important to note that support for ...

javascriptnode.jssettimeoutv8

I have implemented ag-grid for displaying my table data, and now I am looking to enhance it by showing the total sum for each column at the bottom of

This React component showcases the use of AgGridReact to display table data. <AgGridReact rowData={details} columnDefs={columnDefs} defaultColDef={defaultColDef} ...

javascriptreactjsag-gridag-grid-react

The page is not responding after closing the modal dialog

My web application is built using Spring Boot for the backend and Thymeleaf for the front end. The app displays all available groups for users to review. When a user clicks on a group, the documents within that group are listed in a tabular form. Clicking ...

javascriptjqueryajaxspring-bootthymeleaf

displaying a PDF file in Safari

Is there a way to display a PDF document within an HTML page without encountering a missing plugin error? I attempted to use the following code, but the error persists. Interestingly, if I drag the same PDF file directly into my browser, it displays perfe ...

javascriptmacospdfsafari

What is the best way to insert HTML elements in front of other HTML elements using a form and jQuery?

I am looking to insert new HTML elements before existing ones using a form and jQuery: Here is the initial HTML Code: <div class="main-content"> <h2 class="main-content-header">Projekte</h2> <div class="project-content"> ...

javascriptjqueryhtml

Navigate to a different page upon submission

I'm currently working on a JavaScript login page where the correct username and password should redirect users to another page. However, I'm struggling to get the new page to load after successful validation. Below is the HTML code: <body&g ...

javascriptjquery

Searching for code and encoding text in Java

Hey there, I've encountered an issue with my program that fetches content from a website to my own using the URL connection class. The Java class outputs perfectly fine, but when I run the code on JSP, special characters like ¾à¤¨ and मà¥à ...

javascriptjavahtmlcss

What is the best way to find the index of the element in an array that is closest in

I am working with an array of objects in JSON, and I need to find the index of the object in the array that has the closest number of days to a given value. Is there a built-in function in jQuery or JavaScript that can help me with this? If not, how can I ...

javascriptjquerycomparison

Understanding the functionality of tooltip-trigger in Angular

Whenever the value of my tooltip is invalid, I want it to be shown on keyup. However, for some reason <input name="myInput" tooltip-trigger="{{{true: 'keyup', false: 'blur'}[true]}}" ... it always displays the tooltip, <input n ...

javascriptjqueryangularjs

What is the best way to make tooltips track a specific data point they are connected to in D3?

I am working with a figure created using D3 that includes tooltips appearing near a data point when hovered over and can be pinned by clicking on the point. I have implemented the functionality to change the plotted values for the points by clicking on spe ...

javascripthtmlcssd3.js

Transform an array containing strings into an array containing objects within a JSON property

I have received the following JSON data from an endpoint: { "response": { "lines": [ "[{'line':'3007621h7s2','type':'national'},{'line':'3007663f7s9','type':&apo ...

javascriptarraysjsonstringstringify

Kadence Blocks and the white canvas of Gutenberg in WordPress

My Wordpress page editor is not loading correctly for a specific page. It remains blank when trying to edit, even though other pages load without issue. The problem began after I toggled tablet view for styling and the editor crashed. The front end of the ...

javascriptphpwordpress

Utilizing Next.js to Access and Manipulate JSON Data through Server-Side APIs

I've been working on creating a simple local API for myself with Next.js, specifically a timeline generator. However, I've hit a roadblock when it comes to reading the file from the API folder. Here's what I envision for my local applicatio ...

javascriptjsonapinext.jsfs

What is the fastest and most efficient method to confirm that all rows in a 2D array are of equal length?

Imagine you have a 2D array like this: const matrixRegular = [ ['a', 'b', 'c'], ['e', 'f', 'g'], ]; Now, let's think about how we can check if every row in this matrix has the same ...

javascriptarraysmatrix