Как сделать, чтобы при нажатии на кнопку, текст заголовка в src ссылки и переходил по ней?
Пример ссылки:
https://yandex.ru/maps/35/krasnodar/search/(сюда подставить текст заголовка)
<h1>Изумрудный город</h1>
<a href="">Кнопка</a>
Как сделать, чтобы при нажатии на кнопку, текст заголовка в src ссылки и переходил по ней?
Пример ссылки:
https://yandex.ru/maps/35/krasnodar/search/(сюда подставить текст заголовка)
<h1>Изумрудный город</h1>
<a href="">Кнопка</a>
Не очень понятно почему сразу не подставить в ссылку, но если требуется делать именно js'ом, то например так.
const anchorLinks = document.querySelector('[data-js=searchLink]');
const title = document.querySelector('h1').innerText;
anchorLinks.href = `https://yandex.ru/maps/35/krasnodar/search/${encodeURIComponent(title)}`;
<h1>Изумрудный город</h1>
<a href="" target="_blank" data-js="searchLink">Кнопка</a>
Для нескольких ссылок:
const anchorLinks = document.querySelectorAll('[data-js=searchLink]');
const title = document.querySelector('h1').innerText;
const searchHref = `https://yandex.ru/maps/35/krasnodar/search/${encodeURIComponent(title)}`;
anchorLinks.forEach((link) => {
link.href = searchHref;
});
<h1>Изумрудный город</h1>
<a href="" target="_blank" data-js="searchLink">Кнопка 1</a>
<a href="" target="_blank" data-js="searchLink">Кнопка 2</a>
<a href="" target="_blank" data-js="searchLink">Кнопка 3</a>
const title = document.querySelector('h1').innerText;
const mapURL = `https://yandex.ru/maps/35/krasnodar/search/${encodeURIComponent(title)}`;
const anchorLinks = document.querySelectorAll('[data-js=searchLink]');
anchorLinks.forEach(link => link.href = mapURL);
<h1>Изумрудный город</h1>
<a href="" target="_blank" data-js="searchLink">Кнопка 1</a>
<a href="" target="_blank" data-js="searchLink">Кнопка 2</a>
<a href="" target="_blank" data-js="searchLink">Кнопка 3</a>
<a href="" target="_blank" data-js="searchLink">Кнопка 4</a>
Начальный код взял у @MedvedevDev, чтоб автору вопроса было проще разобратся)
Если я правильно понял суть задачи, тогда так: добавляем к заголовку уникальный id
, а на кнопку вешаем обработчик события onclick
. Перед переходом по ссылке href
сначала отрабатывает скрипт, который ее заполняет.
<body>
<h1 id="heading">Изумрудный город</h1>
<a href="" target="_blank" onclick="buttonOnClick(this)">Кнопка</a>
<script>
function buttonOnClick(button) {
let heading = document.getElementById("heading").innerText;
let baseUri = "https://yandex.ru/maps/35/krasnodar/search/";
button.setAttribute("href", baseUri + encodeURIComponent(heading));
}
</script>
</body>
Только работать оно здесь не будет в связи с ограничительными политиками.
Это немного не так работает, про якоря можно почитать здеся, тута и в гогле
Пример:
<a type="button" href="#archor">move to</a>
<div style="padding-bottom:200%;"></div>
<p><a name="archor">Some title</a></p>
const button = document.querySelector('a');
const h1 = document.querySelector('h1');
button.addEventListener('click', () => {
document.location = `https://yandex.ru/maps/35/krasnodar/search/${h1.innerText}/`
});
<h1>Изумрудный город</h1>
<a href="">Кнопка</a>