Если html меняется в одном месте менять его в другом?

Question

[LoveCodeandCoffe]

Есть код

var allcost               = $('#all_total_summ').html();
var result_cost           = $('.total-price').html('Общая сумма: ' +allcost);

т.е он записывает html(у меня это число стоимость всех товаров) из <td id="all_total_summ"></td>
в
<div сlass="total-price"></div>

Мне нужно продублировать, число. Допустим добавили еще 1 товар cумма в td поменялась. Как мне написать условие: если значение td меняется, перезаписывать ,значение в блоке div

Answer 1

[Stalker_RED]

MutationObserver

// выбираем целевой элемент
var target = document.getElementById('some-id');
 
// создаём экземпляр MutationObserver
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// конфигурация нашего observer:
var config = { attributes: true, childList: true, characterData: true };
 
// передаём в качестве аргументов целевой элемент и его конфигурацию
observer.observe(target, config);
 
// позже можно остановить наблюдение
observer.disconnect();

Comments

[LoveCodeandCoffe]

Выдает вот такую ошибку theme.js:411 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
Это где

// передаём в качестве аргументов целевой элемент и его конфигурацию
observer.observe(target, config);

[Stalker_RED]

LoveCodeandCoffe,

parameter 1 is not of type 'Node'.

В target вы передали не DOM-элемент, а что-то другое

[LoveCodeandCoffe]

Stalker_RED, Да,точно. Моя ошибка , по ошибке дописал '#'.

[LoveCodeandCoffe]

Кажется, что то стал понимать скрипт только следит за элементом. Добавил console.lg(target);
И получаю в консоль в моем случае

<td class="text-right" id="all_total_summ">2560€</td>

Закинул, этот же код в функцию click , и в функции .click также в консоль вывожу таргет. И проблема такая, что при первом клике на импут с количеством. исходный td c id all_total_summ меняется. Допустим становится

<td class="text-right" id="all_total_summ">5120€</td>

Но в консоли, мне выдает все-же еще значение

<td class="text-right" id="all_total_summ">2560€</td>

А на второй клик, уже меняется на 5120. И получается таргет какбы с запозданием идет, или он не записывает изменение при 1 клике. Т.е реальный элемент. изначально при загрузке страницы td id="all_total_summ 2560. target совпадает 2560. Потом при клике( добавлении товара) td id="all_total_summ 5120.. target игнорирует 1 клик и выдает опять 2560. Еще раз кликаю id="all_total_summ
7680. В консоли таргет поменялся и стал 5120. И так дальше продолжается 1 клик игнорирует, на 2 записывает и выдает в консоль. Поэтому данные не совпадают , при клике(

[Stalker_RED]

LoveCodeandCoffe, я не вижу ваш код и не понимаю в чем именно проблема.
вы пишете какой-то онлайн калькулятор?
Данные меняете тоже вы?
почему тогда не держать их в памяти? не придется вешать обсерверы и проще будет писать сам калькулятор.

[LoveCodeandCoffe]

Не калькулятор, проще. Во всплывающей корзине выводится полная сумма товаров. Я хочу ,чтобы значение там синхронизировалось со значением в "Общая сумма" Т.е меняется сверху , меняется и снизу.
Это кусок кода popup корзины нижняя часть с полями "Сумма" и "итого" таблицы, да туда значение берется из базы.

<?php foreach ($totals as $total) { ?>
          <?php echo $total['title']; ?>
            <?php echo $total['text']; ?>
          
          <?php } ?>

А это див из другого файла куда я хочу дублировать значение ,из popup корзины( конкретно из td c id = all_total_summ)
<div class="total-price">Общая сумма: </div>
Конечно , правильнее было бы сюда добавить переменную как и в 1 файле <?php echo $total['text']; ?>. НО она не прописана для данного контроллера и я не могу ее прописать( плохо ,знаю php), чтобы потом выводить ее где мне нужно.
Поэтому я пытался сделать так

var total_price =  $('#all_total_summ').text();
 var inner_price =  $('.total-price').text('Общая сумма: '+total_price);
		
$('#cart-table').click(function(){
 var total_price =  $('#all_total_summ').text();
 var inner_price =  $('.total-price').text('Общая сумма: '+total_price);
});

Получается, я взял значение, которое получаю, с бд, и прописал точно такое же в нужном мне месте. И как бы работает, на 1 скрине видно "Общая сумма: 17920 €" т.е записывает . Но все хорошо только при загрузке. Далее кликаю по импуту с количеством увеличиваю кол-во,товаров в корзине значение меняется
а в нужном мне поле остается прежним
еше раз жму на инпут, меняются значения и сверху и снизу, но получается сверху поменялась 2 раза а снизу 1

[LoveCodeandCoffe]

Я думаю, что получается, так потому как значения сверху, не сразу меняются, а с небольшой задержкой
и нужно задержку на запись добавить при клике , но я не уверен

[Stalker_RED]

LoveCodeandCoffe, что мешает обновлять нижнее значение тем-же кодом что и верхнее?

[LoveCodeandCoffe]

Не могу найти код которым, происходит обновление