Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.10.2021, 16:37
Новичок на форуме
Отправить личное сообщение для moytop Посмотреть профиль Найти все сообщения от moytop
 
Регистрация: 01.10.2021
Сообщений: 2

Как добавить onclick к кнопке или ссылке через JS?
Здравствуйте, может кто знает, как добавить произвольное событие onclick к определенным ссылкам на сайте (по шаблону или маске)?

Чтобы после загрузки страницы сразу же этот onclick был в коде и его можно было увидеть через исходный код?

То есть фактически заменить код
<a href="tel://999">999</a>
<a href="tel://888">888</a>
<a href="https://newurl.ru">Скачать прайс</a>

чтобы после генерации страницы он выглядел так:

<a href="tel://999" onclick="ym(777,'reachGoal','ppp'); return true;">999</a>
<a href="tel://888" onclick="ym(777,'reachGoal','ppp'); return true;">888</a>
<a href="https://newurl.ru" onclick="ym(777,'reachGoal','ppp'); return true;">Скачать прайс</a>

Никогда толком с JS не работал, облазил всякие мануалы и вопросы, но не нашел нигде какого-то решения.
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2021, 17:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,062

moytop,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let words = 'tel:|newurl.ru'.split('|');
            let onclick = "ym(777,'reachGoal','ppp'); return true;";
            let cls = words.map(a => `[href*="${a}"]`);
            document.querySelectorAll(cls).forEach(elem => elem.setAttribute('onclick', onclick));
        });
    </script>
</head>

<body>
    <a href="tel://999">999</a>
    <a href="tel://888">888</a>
    <a href="https://newurl.ru">Скачать прайс</a>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2021, 18:33
Новичок на форуме
Отправить личное сообщение для moytop Посмотреть профиль Найти все сообщения от moytop
 
Регистрация: 01.10.2021
Сообщений: 2

Спасибо большое, всё работает, но вторую неделю уже пытаюсь понять как. Просто для того, чтобы иметь гибкость, и например, добавить
let onsubmit = "ym(777,'reachGoal','ppp'); return true;"; в форму типа:

<form action="#" method="post"> 
<input name="lead_name" type="text" placeholder="Введите ваше имя">
<input name="lead_email" type="text" placeholder="Введите ваш e-mail">
<input type="submit" value="Отправить">
</form>


чтобы получилось: <form action="#" method="post" onsubmit = "ym(777,'reachGoal','ppp'); return true;">

Может вас не затруднит хотя бы в общих чертах описать суть кода, особенно let cls = words.map(a => `[href*="${a}"]`);
и document.querySelectorAll(cls).forEach(elem => elem.setAttribute('onclick', onclick));

По какому принципу он ищет? когда смотрю документацию, то вижу там только .querySelectorAll - мол это по селекторам поиск. А тут ведь работает не по селекторам, а разбирает html код и конкретные ссылки.

Был бы признателен за любую помощь, чтобы научиться хотя бы минимуму: добавлять любое событие в любую строчку сайта (будь то ссылка, кнопка или форма), может есть ссылки на какие-то правильные документации. Или в целом чтобы можно было понять суть и базовый принцип, что менять в коде, если это кнопка или форма?

Последний раз редактировалось moytop, 21.10.2021 в 07:48.
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2021, 19:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,062

Сообщение от moytop
тут ведь работает не по селекторам,
Знаете ли вы селекторы?

Цитата:
[attr*="val"] – атрибут содержит подстроку val, например равен "myvalue"
Ответить с цитированием
  #5 (permalink)  
Старый 13.10.2021, 19:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,062

moytop,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let onsubmit = "ym(777,'reachGoal','ppp'); return true;";
            document.querySelectorAll('[method="post"]').forEach(elem => elem.setAttribute('onsubmit', onsubmit));
        });
    </script>
</head>

<body>
    <form action="#" method="post">
        <input name="lead_name" type="text" placeholder="Введите ваше имя">
        <input name="lead_email" type="text" placeholder="Введите ваш e-mail">
        <input type="submit" value="Отправить">
    </form>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 13.10.2021, 19:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,062

moytop,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заменить код страницы через js ??? Alex42d Общие вопросы Javascript 1 10.09.2017 06:39
Сравнение данных в двух коллекциях через массив (или еще как?) DerAlSem Node.JS 2 06.09.2017 12:49
Как добавить на чужой сайт свой js-код или css стили? Hurray Общие вопросы Javascript 1 08.06.2015 00:00
Как добавить атрибут к ссылке hell100 Общие вопросы Javascript 2 20.06.2012 15:51
Как вызвать OpenDialog через JS? Некто Элементы интерфейса 6 26.11.2009 13:17