Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

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

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>

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs