Could this be a problem within my recursive function?

Struggling to iterate through a stack of HTML Elements, I attempted to write a recursive function with no success.

In the code snippet below, I'm facing challenges in returning a value from an if statement and ultimately from the function itself.

While I can successfully console.log the necessary information, I am unable to return it. This issue is uncommon for me, prompting me to seek fresh eyes on this code revision.

function findElementByDataValue(target: EventTarget, data: {key: string, value: string}){

    if (target.dataset[data.key] === data.value) {
      return target;
    };

    if (target.children.length > 0) {

      for (const child in target.children) {
        const element = target.children[child];

        // Attempts to return within the "recursive" function seem to cause abrupt execution
        if (element.children && typeof element === 'object') {
          findElementByDataValue(element, data);
        }

      }

    }

}

If you have any insights or spot an issue with my recursive function, your help would be greatly appreciated.

Answer №1

Utilizing the return keyword as demonstrated.

Your second function invokes the first function without capturing the value returned by it:

Replace

    if (element.children && typeof element === 'object') {
      findElementByDataValue(element, data);
    }

with:

    if (element.children && typeof element === 'object') {
      return findElementByDataValue(element, data);
    }

It is advisable to debug your code using a debugger tool in popular web browsers to understand the process better.

Check out some debugger documentation links below:

If you are new to JavaScript, consider exploring concepts like unit testing and test-driven development.

Writing tests early on can assist in identifying potential issues in your code and creating more resilient functions. You may find tools like Jasmine helpful, while this article suggests various other JavaScript unit testing options

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

Enrich TypeScript objects by incorporating additional properties beyond the ones already present

If I have an expression and want to add extra properties without repeating existing ones, how can I achieve that? For instance, if the expression is a variable, it's simple to include additional fields (like adding field e): const x = { a: 1 }; cons ...

Invoke the submit function of a form located outside a Material UI dialog from within the dialog

I'm facing an issue with a nested form scenario. The <form/> inside another form is displayed as a Material UI dialog and rendered in a separate portal in the DOM. /* SPDX-FileCopyrightText: 2021 @koistya */ /* SPDX-License-Identifier: MIT */ i ...

Incorporate Angular directives within a tailor-made directive

I just started using a fantastic autocomplete directive called Almighty-Autocomplete. However, I feel like it's missing some features. The basic structure of the directive is as follows: .directive('autocomplete', function () { var index ...

Can you verify my comprehension of the process for iteratively displaying numerous custom Tree components in Vue.js 3?

While exploring the Vue.js documentation, I came across an example of iteratively rendering a Tree using the v-for directive. My aim was to modify the code to render multiple TreeItems in the App.vue file. I am puzzled by the fact that it is possible to i ...

Encountering an "Invalid hook call error" while utilizing my custom library with styled-components

I recently developed my own custom UI tool using the styled-components library, integrating typescript and rollup for efficiency. One of the components I created looks like this: import styled from 'styled-components' export const MyUITest2 = s ...

CSS for when the mouse hovers over an element

Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...

Unable to fetch valid JSON from a different domain using JQuery and AJAX

I'm having trouble accessing a JSON api from a specific adult-themed website. I've been trying to make it work but so far no luck. You can find my code snippet in this jsfiddle: http://jsfiddle.net/SSqwd/ and here is the script: $.ajax({url: &ap ...

Save room for text that shows up on its own

I am currently dealing with a situation where text appears conditionally and when it does, it causes the rest of the page to be pushed down. Does anyone know the best way to reserve the space for this text even when it's not visible so that I can pre ...

Is it feasible to incorporate a method into a prototype and ensure that 'this' is associated with the appropriate type in TypeScript?

I have a scenario where I need to add a new method to a prototype, specifically to a class created using TypeScript. Here is an example: declare module "./MyClass" { interface MyClass { myNewMethod(); } } MyClass.prototype.myNewM ...

Button click not triggering JQuery click event

$(document).ready(function () { $('#btnApplyFilter').click(function () { alert("JQuery is not running!"); }); }); Why is the above function not working when the button is clicked? Here is the code for my button : ...

What could be causing my CSS transitions to fail when using jQuery to add classes?

I'm currently working on a website and I'm facing an issue with the transition not functioning as expected. The problem persists even when the 7.css stylesheet is removed and interestingly, the transition works fine when using window:hover. My a ...

The UI bootstrap dropdown toggle requires two clicks to reopen after being manually closed

Utilizing the UI Bootstrap drop-down element to display the calendar from angular-bootstrap-datetimepicker upon clicking. Additionally, a $watch has been implemented to close the dropdown once a date is chosen. Access the Plunker here <div uib-dropdow ...

Show only specific data from JSON results

I am trying to display a specific cryptocurrency's price without the need for curly braces or explicitly stating "USD". Currently, it appears as {"USD":0.4823} when using the following code: <script> $(document).ready(function () { ...

problem with passing the identification number into the function

I am facing an issue with passing the id into a javascript onClick method. I am using the Spring framework and in the controller class, I send the related id to the JSP file like this: model.addAttribute("uploadid", uploadid); Afterwards, I need to p ...

Automated updating feature with jQuery

Is there a way to use jQuery code to automatically refresh a page after navigating back in the browser history? Here is an example of what I have tried: jQuery(".form_" + form_count).html("<div id='message'></div>") jQuery('#me ...

"The use of objects as a React child is not permitted" and code linters

I'm encountering an issue with a simple component and I can't figure out why. The error message and code snippet are as follows: Error: Objects are not valid as a React child (found: object with keys {Cfor, children}). If you meant to render a ...

Loop through an HTML table in order to emphasize variations in cells that contain multiple comparison items

I am interested in highlighting variances between the initial row of a table and all other rows based on columns. I have successfully managed to achieve this when each cell contains only one item/comparison. However, I would like to expand this to include ...

Is it possible to resize an object using JavaScript?

Is it possible to change the size of an object when loading specific data by clicking on navigation? <object id="box" width="250" height="250" data=""></object> Although the JS code loads the data, it does not change the size. document.getEl ...

Unable to access Form element in Firefox browser

I'm struggling with debugging unfamiliar problems. For instance, in my HTML there's a form: <form name="myForm" > <table> <tr> <td> <input type="radio" name="myType" value="val" onclick="someF ...

What makes the state display potential when utilizing Redux? Also, what is the best approach to access the array within the outcome?

Upon logging the state here, I noticed a promising result. However, I am struggling to access the array inside the promise outcome. I attempted using Object.keys and map but was unsuccessful. > import React, { useEffect, useState } from 'react&apos ...