Как забрать инфу из баллуна яндекс карт?

Question

[Aleksey]

Доброго дня.
Задача, которую не могу решить:
Есть кусок яндекс карт на сайте, на карте есть баллун, при клике на баллун открывается инфа (динамическая).
Как забрать эту инфу и поставить в другой блок?

Вот например:
u0763918test1.isp.regruhosting.ru
Как из баллуна на карте (при клике появляется инфа 1+1=2), эту инфу отобразить в розовом блоке?

Answer 1

[Александр]

Вариант 1.

const box = document.querySelector('.box');

const debounce = (callback, delay) => {
	let timeout = null;

	return (...args) => {
		clearTimeout(timeout);

		timeout = setTimeout(callback, delay, ...args);
	};
};

const update = () => {
	const balloon = document.querySelector('[class$="balloon__content"]');

	if (balloon !== null) {
		box.textContent = balloon.textContent;
	}
};

const debouncedUpdate = debounce(update, 300);

window.addEventListener('click', () => {
	debouncedUpdate();
});

Вариант 2.

const box = document.querySelector('.box');

const observer = new MutationObserver(mutations => {
	for (let mutation of mutations) {
		if (mutation.target.className.includes('balloon__content')) {
			box.textContent = mutation.target.textContent;
		}
	}
});

observer.observe(document.querySelector('ymaps'), {
	childList: true,
	attributes: false,
	subtree: true
});

Comments

[Aleksey]

Огромное спасибо, а как сделать, чтобы он сразу переносился в розовый блок, а не при клике. Т.е. мы кликаем, по баллуну открывается инфа, ещё раз кликаем и только тогда инфа уходит в розовый блок. Как сделать сразу?

[Александр]

Aleksey, Обновил ответ. Для первого варианта написал debouncer, чтобы браузер не умирал. Рекомендую использовать второй вариант, т. к. проще отслеживать изменения дерева, тогда сразу при изменении всплывающего окна будут происходить изменения в Вашем элементе.

[Aleksey]

Александр, Спасибо Вам, 1ое решение работает, 2ое нет (phpstorm жалуется на
if (mutation.target.className.includes('balloon__content')) {

className

[Александр]

Aleksey, А ошибку можно, мне кажется что жалуется какой-нибудь JS Hint. className можно заменить на classList.toString()

Answer 2

[Vladislav]

Через JQ

$('.ymaps-2-1-76-svg-icon').on('click', function(){
	alert($('.ymaps-2-1-76-balloon__content').children().children().html());
});

Скриншот из Console: