Как получить адрес ссылки?

Question

[Ingernirated]

Подскажите, как вытащить путь, который внутри тега
<a href="...">click</a>
Чтобы при нажатии на слово click оно превратилось в ссылку, а уже по нажатию ссылки можно было перейти

Answer 1

[Vlad Feninets]

<a id="fakelink" data-href="http://google.com">click</a>

document.querySelector('#fakelink').addEventListener('click', function() {
	var link = this.getAttribute('data-href')
	this.setAttribute('href', link)
})

https://jsfiddle.net/fnnzzz/Lh40L7mf/

Comments

[Ingernirated]

Почему функция

function change() {
a.innerHTML = "www.w3s.com";
a.setAttribute("href", "www.w3s.com");
}
a.addEventListener("click", change)

не только меняет св-ва a, но ещё и сразу же переходит по ссылке?

Answer 2

[Александр Фёдорцев]

В ответе Vlad Feninets, возможен моментальный переход по ссылке, без нажатия на неё. Для его исключения можно применить такой подход:

<p id="link" data-href="http://google.com">GET LINK</p>
<script>
	document.querySelector('#link').addEventListener('click', function() {
  let href = this.getAttribute('data-href');
  this.innerHTML = `<a href=\"${href}\">${href}</a>`;
});
</script>

Comments

[Ingernirated]

что означает доллар и фигурные скобки?

[Vlad Feninets]

как это моментальный, если у ссылки нет хрефа?

[Vlad Feninets]

Ingernirated: интерполяция / шаблонные строки из ES2015

[Александр Фёдорцев]

Ingernirated: https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Александр Фёдорцев]

Vlad Feninets: Ваш код в Mozilla Firefox 45.8.0 вызывает переход по ссылке. Про Другие не скажу...

[Vlad Feninets]

Александр Фёдорцев: какая-то у вас неправильная значит мозилла, не может "a" без href работать, либо какой-то плагин это делает за вас.

к слову у меня на 51.0 firefox все работает как и должно.

[Александр Фёдорцев]

Vlad Feninets: Возможно вы правы. Но заметил проблему, написал альтернативный вариант...

[Александр Фёдорцев]

Vlad Feninets: Кстати, в таком виде:

document.querySelector('#fakelink').addEventListener('click', function() {
  var link = this.getAttribute('data-href'); this.innerText=link;

  setTimeout(()=>{this.setAttribute('href', link); },50); 
});

ваш код работает идеально. Видимо как-то связано со всплытием событий...