Question

0

49

Views

How to solve Javascript Cycle reference?

Fisrt Code

HTML

<div>
    <select class="a">
        <option value="1">aaa</option>
        <option value="2">bbb</option>
    </select>
    <input class="b">
</div>

A.js

const a =  (function initA() {
    const a = document.querySelector('select.a');

    a.addEventListener('change', function() {
        b.setValue(this.value);
    })

    return {
        value: () => a.value
    }
})()

const b =  (function initB() {
    const b = document.querySelector('input.b');

    b.addEventListener('keyup', function (){
        if (this.value.startsWith(a.value()) === false) {
            b.value = a.value();
        }
    })

    return {
        setValue: function (val) {
            b.value = val;
        }
    }
})()

An event that initializes the input value with the select value when the select changes, and if the input value does not start with the select value, it initializes with the select value.

I thought it would be used in many places, so I moved the code and modularized it.

Common.js

export function initA() {
    const a = document.querySelector('select.a');

    a.addEventListener('change', function() {
        b.setValue(this.value);
    })

    return {
        value: () => a.value
    }
}

export function initB() {
    const b = document.querySelector('input.b');

    b.addEventListener('keyup', function (){
        if (this.value.startsWith(a.value()) === false) {
            b.value = a.value();
        }
    })

    return {
        setValue: function (val) {
            b.value = val;
        }
    }
}

A.js

const a = initA();
const b = initB();

But it occur Uncaught ReferenceError

const a = initA(b);
const b = initB(a);

The same goes for giving a variable.

how to solve problem?

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T09:05:09.653Z

Since a select requires an input to work properly and the other way around, I would just merge the two functions into one. Both of your functions are not really standalone. Also I prefer passing the elements instead of assuming select.a and input.b.

function initAB(a, b){
  if(a && b){
    a.addEventListener('change', function(b) {
      b.value = this.value
    }.bind(a, b));
    
    b.addEventListener('keyup', function (a){
      if (this.value.startsWith(a.value) === false) {
        b.value = a.value;
      }
    }.bind(b, a));
    
    return true
  };
  
  return false
};

initAB(
  document.querySelector('select.a'),
  document.querySelector('input.b')
);

<div>
    <select class="a">
        <option value="1">aaa</option>
        <option value="2">bbb</option>
    </select>
    <input class="b">
</div>