Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2020, 13:50
Новичок на форуме
Отправить личное сообщение для A.User Посмотреть профиль Найти все сообщения от A.User
 
Регистрация: 11.02.2020
Сообщений: 7

Как всем ссылкам в блоке присвоить onClick и в href поставить #
Требуется в документе или блоке заменить все ссылки, вытащить из них содержимое href, поместить полученные ссылки в событие onClick(url_href), а href сделать "#" то есть чтобы клик происходил через функцию. Прошу подскажите реально ли такое сделать? Сам я новичек, но вот появилась задача организовать такое, хочу все ссылки открывать с помощью собития. Заранее благодарю.
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2020, 13:56
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,707

var container = document.querySelector('block-selector');
if (!container) {
    return;
}

container.querySelectorAll('a[href]').forEach(function (node) {
    var href = node.getAttribute('href');

    node.addEventListener('click', function (e) {
        e.preventDefault();

        onClick(href);// onClick - you function name
    });

    node.href = '#';
});
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2020, 14:46
Новичок на форуме
Отправить личное сообщение для A.User Посмотреть профиль Найти все сообщения от A.User
 
Регистрация: 11.02.2020
Сообщений: 7

Благодарю! По коду смотрю, так вроде должно сработать, но запускаю и не работает Не пойму в чем дело... Прошу помочь.

Код:
<html>

<head>
    <script>
        function goURL(k) {
            alert(k);
        }

        var container = document.querySelector('.pages');
        if (!container) {
            return;
        }

        container.querySelectorAll('a[href]').forEach(function (node) {
            var href = node.getAttribute('href');

            node.addEventListener('click', function (e) {
                e.preventDefault();

                goURL(href);// onClick - you function name
            });

            node.href = '#';
        });
    </script>
</head>

<body>
    <div class="pages">
        <a href="http://site.com/page/2/">2</a>
        <a href="http://site.com/page/3/">3</a>
        <a href="http://site.com/page/4/">4</a>
        <a href="http://site.com/page/5/">5</a>
        <a href="http://site.com/page/6/">6</a>
        <a href="http://site.com/page/7/">7</a>
        <a href="http://site.com/page/8/">8</a>
        <a href="http://site.com/page/9/">9</a>
        <a href="http://site.com/page/10/">10</a>
        <a href="http://site.com/page/11/">11</a>
    </div>
</body>

</html>

Последний раз редактировалось A.User, 11.02.2020 в 14:49.
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2020, 14:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

A.User,
нет блока <div class="pages"> на момент работы скрипта. скрипт вниз страницы или читать про DOMContentLoaded
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2020, 14:56
Новичок на форуме
Отправить личное сообщение для A.User Посмотреть профиль Найти все сообщения от A.User
 
Регистрация: 11.02.2020
Сообщений: 7

Я поместил код перед /body и все равное не срабатывает...
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2020, 15:15
Новичок на форуме
Отправить личное сообщение для A.User Посмотреть профиль Найти все сообщения от A.User
 
Регистрация: 11.02.2020
Сообщений: 7

Убрал

if (!container) {
return;
}


заработало.
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2020, 15:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от A.User
заработало.
вы уверены?
Ответить с цитированием
  #8 (permalink)  
Старый 11.02.2020, 15:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

A.User,
рабочий код
<html>

<head>

</head>

<body>
    <div class="pages">
        <a href="http://site.com/page/2/">2</a>
        <a href="http://site.com/page/3/">3</a>
        <a href="http://site.com/page/4/">4</a>
        <a href="http://site.com/page/5/">5</a>
        <a href="http://site.com/page/6/">6</a>
        <a href="http://site.com/page/7/">7</a>
        <a href="http://site.com/page/8/">8</a>
        <a href="http://site.com/page/9/">9</a>
        <a href="http://site.com/page/10/">10</a>
        <a href="http://site.com/page/11/">11</a>
    </div>
    <script>
        function goURL(k) {
            alert(k);
        }

        var container = document.querySelector('.pages');
        if (container) {
        container.querySelectorAll('a[href]').forEach(function (node) {
            var href = node.getAttribute('href');

            node.addEventListener('click', function (e) {
                e.preventDefault();

                goURL(href);// onClick - you function name
            });

            node.href = '#';
        });};
    </script>
</body>

</html>

или так
<html>

<head>
    <script>
  document.addEventListener( "DOMContentLoaded" , function() {
  function goURL(k) {
            alert(k);
        }

        var container = document.querySelector('.pages');
        if (!container) {
            return;
        };

        container.querySelectorAll('a[href]').forEach(function (node) {
            var href = node.getAttribute('href');

            node.addEventListener('click', function (e) {
                e.preventDefault();

                goURL(href);// onClick - you function name
            });

            node.href = '#';
        });
  });

    </script>
</head>

<body>
    <div class="pages">
        <a href="http://site.com/page/2/">2</a>
        <a href="http://site.com/page/3/">3</a>
        <a href="http://site.com/page/4/">4</a>
        <a href="http://site.com/page/5/">5</a>
        <a href="http://site.com/page/6/">6</a>
        <a href="http://site.com/page/7/">7</a>
        <a href="http://site.com/page/8/">8</a>
        <a href="http://site.com/page/9/">9</a>
        <a href="http://site.com/page/10/">10</a>
        <a href="http://site.com/page/11/">11</a>
    </div>
</body>

</html>
Ответить с цитированием
  #9 (permalink)  
Старый 11.02.2020, 16:38
Новичок на форуме
Отправить личное сообщение для A.User Посмотреть профиль Найти все сообщения от A.User
 
Регистрация: 11.02.2020
Сообщений: 7

Да, заработал тот вариант. А что, там есть явные ошибки?
Ответить с цитированием
  #10 (permalink)  
Старый 11.02.2020, 16:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от A.User
Да, заработал тот вариант. А что, там есть явные ошибки?
ошибок нет, можно и просто убрать условие, если поставить скрипт вниз страницы, думал у вас заработало без переноса вниз.

Последний раз редактировалось рони, 11.02.2020 в 17:00.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
form, onclick, function...как это все сплести воедино? Berowz Общие вопросы Javascript 0 04.03.2012 15:06
Как обойти base href, чтобы ссылка на внешн. js была локальной? Andrej_2 Общие вопросы Javascript 2 18.11.2011 11:25
Как избавиться от каскадного onclick? GydruS Events/DOM/Window 2 24.02.2011 11:54
Как в IE динамически установить значение события onClick? Гость Элементы интерфейса 6 16.01.2011 23:46
Как в iframe с designmode=on отследить onClick ? negr78 Events/DOM/Window 2 24.10.2010 09:48