0

Всем привет! Есть такая задача: Даны ссылки. По загрузке страницы, если ссылка начинается с http://, то добавьте ей в конец стрелку → (делается так: →).

Помогите решить как вставить эту стрелку → (делается так: →) в конец innerHTML-a. Мое решение выглядит следующим образом:

<a  target="_blank" href="https://www.google.com.ua">Гугл</a>
<a  target="_blank" href="https://yandex.ua/" class="Miras">Яндекс</a>
<a  target="_blank" href="https://www.rambler.ru" name="Eldar">Рамблер</a>
<a  target="_blank" href="https://www.ukr.net">УкрНет</a>
<a  target="_blank" href="http://wiki.ru">Вики</a>

    var elem = document.querySelectorAll('a');
    for ( var i = 0; i < elem.length; i++ ) {
        if (elem[i].href.indexOf('http://') === 0) {
            elem[i].addEventListener('click', show);
        }

    function show() {
        this.innerHTML = this.innerHTML + '<q>' + '&rarr;' + '</q>';
        this.removeEventListener('click', show);
    }
1
  • Покажите как это должно выглядеть на выходе.
    – Denis640Kb
    Commented 14 янв. 2020 в 12:32

1 ответ 1

1

Если я корректно понял суть Вашего вопроса: (Зачем отслеживать событие click для меня осталось загадкой).

var elem = document.querySelectorAll('a');
for ( var i = 0; i < elem.length; i++ ) {
    if (elem[i].href.indexOf('http://') === 0) {
        var v = '→';
        elem[i].append(v)
    }
}
<a  target="_blank" href="https://www.google.com.ua">Гугл</a>
<a  target="_blank" href="https://yandex.ua/" class="Miras">Яндекс</a>
<a  target="_blank" href="http://www.rambler.ru" name="Eldar">Рамблер</a>
<a  target="_blank" href="https://www.ukr.net">УкрНет</a>
<a  target="_blank" href="http://wiki.ru">Вики</a>

Если надо после нажатия на элемент - только в этом случае именно ему одному добавлять стрелку, если он начинается на http://
То так:

var elem = document.querySelectorAll('a');
for ( var i = 0; i < elem.length; i++ ) {
    if (elem[i].href.indexOf('http://') === 0) {
        elem[i].onclick = function(event) {
            let target = event.target;
            var v = '→';
            target.append(v);
        }
    }
}
<a  target="_blank" href="https://www.google.com.ua">Гугл</a>
<a  target="_blank" href="https://yandex.ua/" class="Miras">Яндекс</a>
<a  target="_blank" href="http://www.rambler.ru" name="Eldar">Рамблер</a>
<a  target="_blank" href="https://www.ukr.net">УкрНет</a>
<a  target="_blank" href="http://wiki.ru">Вики</a>

1
  • Спасибо, решил вопрос. Ваши решения тоже отлично работают! Commented 16 янв. 2020 в 6:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.