Javascript-форум - Как добавить onclick к кнопке или ссылке через JS?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как добавить onclick к кнопке или ссылке через JS? (https://javascript.ru/forum/events/83151-kak-dobavit-onclick-k-knopke-ili-ssylke-cherez-js.html)

Как добавить 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 не работал, облазил всякие мануалы и вопросы, но не нашел нигде какого-то решения.

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>

Спасибо большое, всё работает, но вторую неделю уже пытаюсь понять как. Просто для того, чтобы иметь гибкость, и например, добавить
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

тут ведь работает не по селекторам,

Знаете ли вы селекторы?

Цитата:

[attr*="val"] – атрибут содержит подстроку val, например равен "myvalue"

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>

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

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

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

А если уже есть onsubmit в форме? Тогда код не срабатывает...
Вот например сайт https://fiorino-travel.by/
Там onsubmit в формах стоит - скрин https://disk.yandex.com/i/mUaHp-biAPDSFQ
И если добавляю:

<script>
        document.addEventListener('DOMContentLoaded', function() {
            let onsubmit = "ym(90691922,'reachGoal','ppp'); return true;";
            document.querySelectorAll('[method="post"]').forEach(elem => elem.setAttribute('onsubmit', onsubmit));
        });
    </script>

то уже не работает

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