Как подставить текст заголовка в ссылку?

Question

Как сделать, чтобы при нажатии на кнопку, текст заголовка в src ссылки и переходил по ней?

Пример ссылки:

https://yandex.ru/maps/35/krasnodar/search/(сюда подставить текст заголовка)

<h1>Изумрудный город</h1>

<a href="">Кнопка</a>

Answer 1

Это немного не так работает, про якоря можно почитать здеся, тута и в гогле

Пример:

<a type="button" href="#archor">move to</a>
<div style="padding-bottom:200%;"></div>
<p><a name="archor">Some title</a></p>

Answer 2

Не очень понятно почему сразу не подставить в ссылку, но если требуется делать именно 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>

Answer 3

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, чтоб автору вопроса было проще разобратся)

Answer 4

Если я правильно понял суть задачи, тогда так: добавляем к заголовку уникальный 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>

Только работать оно здесь не будет в связи с ограничительными политиками.

Answer 5

    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>

БЛОГ НА HUSL

Как подставить текст заголовка в ссылку?

Ответы (5 шт):