Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

Question

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

I am facing an issue with returning a value from a function. It seems like a simple task - just looping through my HTMLElements and returning the one I need.

This problem is new to me, and I have spent a considerable amount of time debugging the code and trying different approaches to make it work or understand why it's not working as expected.

Any help and insight would be greatly appreciated.

Below is the snippet of the function that I am calling from an event listener triggered by RXjs - fromEvent

I believe the code is fairly self-explanatory, but if you require more details, I can provide my entire code.

function findElementByDataValue(target: EventTarget, data: {key: string, value: string}){
  // attempting to return from a function
  function send(element) {
    return element;
  }

  if(target && target.dataset){

    if(target.dataset[data.key] === data.value) {
      // console.log(target);
      // send(target);
      return target;
    } else {
      if(target.children){
        for (const child in Object.entries(target.children)) {
          const element = target.children[child];

          findElementByDataValue(element, data);
        }
      }
    }
  }
}

You can view the complete code on StackBlitz

*Function called at line:* 65 *Function definition at line:* 34

javascript typescript

Answer 1

Answer №1

Execute the findElementByDataValue function and return the result if a matching element is found. If not, the recursive call will not perform any action in the else block:

function findElementByDataValue(target: EventTarget, data: {key: string, value: string}){
  // Function to return an element
  function send(element) {
    return element;
  }

  if(target && target.dataset){

    if(target.dataset[data.key] === data.value) {
      // console.log(target);
      // send(target);
      return target;
    } else {
      if(target.children){
        for (const child in Object.entries(target.children)) {
          const element = target.children[child];

          const result = findElementByDataValue(element, data);
          if (result) {
            return result;
          }
        }
      }
    }
  }
}

Answer 2

Execute the findElementByDataValue function and return the result if a matching element is found. If not, the recursive call will not perform any action in the else block:

function findElementByDataValue(target: EventTarget, data: {key: string, value: string}){
  // Function to return an element
  function send(element) {
    return element;
  }

  if(target && target.dataset){

    if(target.dataset[data.key] === data.value) {
      // console.log(target);
      // send(target);
      return target;
    } else {
      if(target.children){
        for (const child in Object.entries(target.children)) {
          const element = target.children[child];

          const result = findElementByDataValue(element, data);
          if (result) {
            return result;
          }
        }
      }
    }
  }
}

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

Answer №1

Similar questions

React: Issue with For Loop not recognizing updates in Hook's State

Implementing CSS styling within a JavaScript file

Even after rigorous type checking, TypeScript continues to throw the ts2571 error when handling an unidentified variable

Running a code from a plugin in Wordpress site

Angular ng-repeat not recognizing nested ng-if conditions

Retrieving data from a server using the GET method with parameters through axios in a React Native application

Passing a string to a function in AngularJS through ng-click

Bootstrap icon issue: square displaying instead of the intended icon

Effortlessly glide through entire pages using the mouse wheel for seamless scrolling

What is the reason behind eslint not permitting the rule option @typescript-eslint/consistent-type-imports?

Styling div elements to match the dimensions of table rows in CSS

How can I retrieve the class of the parent element by referencing the child id in jQuery?

Encountering failures while running Angular tests in GitHub Actions due to reading inner text (which works fine locally)

How can you use JavaScript and regex to extract the word before a comma?

Despite seeming false, my Javascript if statement still evaluates to true

How can I dynamically load a 3D model (in JSON format) at the current location of the mouse using Three.JS?

Expand the initial expansion panel within an Angular Material accordion by opening the first attachment

Changing Image Size in Real Time

What is the reason behind having to coerce the enum value before the object type can be properly recognized?

Tips for incorporating the camera from fbxloader into your three.js scene