0

Есть объект entries = {} с несколькими уровнями вложенности.

var global = {}
global.entries = [{},{},{},{},{},{},{},{},{},{}];

Есть блок div назовем его giver,

function setClient() {
  global.entries[3] = {
    name: 'Иванов Иван Иванович'
  }
}

function setStatus() {
  global.entries[3] = {
    status: 'Истец'
  }
}

function setAddress() {
  global.entries[3] = {
    address: 'Красная пл. д. 1'
  }
}

function fillTaker() {
  page = taker.querySelector('p')
  page.textContent = global.entries[3].name + ' ' + global.entries[3].status + ' ' + global.entries[3] = {
    address: 'Красная пл. д. 1'
  }
}
<div id="giver">
  <input type="radio" onchange="setClient();" />
    <select name="statusDropDown" onchange="setStatus();" />
    <select name="addressDropDown" onchange="setAddress();" />
</div>

<div id="taker">
  <p></p>
</div>

который содержит элементы управления: 2 раскрывающихся списка select и флажок type=radio. На элементах управления висят обработчики событий, которые записывают определенную информацию в объект entries.

Что нужно: Используя указанный объект как промежуточное место хранения данных в удобной форме, запустить функцию, которая данные из него считает и передаст в текстовом виде в другой блок div, назовем его taker не раньше,чем запись очередной порции данных в объект будет успешно завершена.

Единственный выход который я вижу это в каждый обработчик событий добавить в конце функцию передачи, но это как то выглядит не особо оптимально: множество разных элементов, множество разных обработчиков событий и т.д. Можно ли как-то повесить событие на изменение объекта entries или иным способом решить эту проблему?

P.S. Я повесил onchange обработчик на giver блок и он ловит событие еще до того, как информация запишется, в результате в taker попадает "вчерашний день".

4
  • Выложите, пожалуйста, код, так будет более менее понятнее. Спасибо.
    – meine
    13 янв 2019 в 19:03
  • Сейчас, пару минут 13 янв 2019 в 19:07
  • После долгого вчитывания в текст, и пока код не добавлен могу посоветовать делегирование событий. 13 янв 2019 в 19:17
  • @AlexandrTovmach, скорее Proxy нужен
    – Grundy
    13 янв 2019 в 19:19

1 ответ 1

1

Как вариант, если правильно понял вопрос. Но тут все также основано на событиях. Самой функции renderTaker ничего не передается - все данные берутся из глобального объекта. Для каждого поля ввода можно задать собственное поведение в зависимости от их атрибута name внутри объекта behavior.

let global = {}
global.entries = [];

let renderTaker = () => {
  document.querySelector("#taker > p").innerHTML = global.entries.join(", ");
}

Array.from(document.getElementById("giver").children).forEach(item => {
  item.addEventListener("change", e => {
    let element = e.currentTarget;
    let name = element.getAttribute("name");
    let behavior = {
      "client": () => {
        global.entries[0] = document.querySelector("label[for='" + element.id + "']").innerHTML;
      },
      "statusDropDown": () => {
        global.entries[1] = element.value;
      },
      "addressDropDown": () => {
        global.entries[2] = element.value;
      }
    }
    behavior[name]();
    renderTaker();
  });
});
<div id="giver">
  <input id="radio0" type="radio" name="client" />
  <label for="radio0">Radio 0</label>
  <input id="radio1" type="radio" name="client" />
  <label for="radio1">Radio 1</label>
  <input id="radio2" type="radio" name="client" />
  <label for="radio2">Radio 2</label>

  <select name="statusDropDown">
    <option value="Истец">Истец</option>
    <option value="Подсудимый">Подсудимый</option>
    <option value="Судья">Судья</option>
  </select>

  <select name="addressDropDown">
    <option value="ул 0">ул 0</option>
    <option value="ул 1">ул 1</option>
    <option value="ул 2">ул 2</option>
  </select>
</div>

<div id="taker">
  <p></p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.