Как добавить несколько переменных JavaScript в HTML-тег a href?

Оффтоп javascript
1

Я пытаюсь создать кнопку с ссылкой, используя JavaScript и HTML. Вот мой код:

pop_str = pop_str + '<a href="' + марка1 + 'против' + марка2 + '/"><button class="кнопка главная_кнопка">Сравнить сейчас!</button></a>';

Но он выдает ошибку. Как правильно написать этот код, чтобы он работал? Я хочу, чтобы на странице отображалась кнопка, при нажатии на которую пользователь переходил бы по ссылке, составленной из значений переменных марка1 и марка2. Подскажите, пожалуйста, как исправить мой код или предложите альтернативный способ решения этой задачи. Заранее спасибо за помощь!

2

Не советую использовать кнопку внутри тега . Это не валидная разметка и может вызвать проблемы. Лучше стилизовать сам как кнопку через CSS. Вот рабочий вариант:

pop_str += <a href=\"/${марка1}-против-${марка2}/\" class=\"кнопка главная_кнопка\">Сравнить сейчас!</a>;

Заметь, я добавил слеш в начале URL и дефисы между словами - так правильнее для SEO. И используй encodeURIComponent() для значений переменных, чтобы избежать проблем с кодировкой.
3

Кстати, есть еще способ сделать это через createElement и setAttribute. Примерно так:

let link = document.createElement(‘a’);
link.href = /${марка1}-против-${марка2}/;
link.textContent = ‘Сравнить сейчас!’;
link.className = ‘кнопка главная_кнопка’;

pop_str += link.outerHTML;

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

4

слушай, я тоже недавно столкнулся с подобной задачкой. попробуй использовать шаблонные строки - это намного удобнее. вот как можно переписать твой код:

pop_str += <a href=\"${марка1}против${марка2}/\"><button class=\"кнопка главная_кнопка\">Сравнить сейчас!</button></a>;

такая запись позволяет легко вставлять переменные в строку. главное не забудь использовать обратные кавычки вместо обычных. надеюсь, это поможет решить твою проблему! удачи с проектом