Как добавить событие с помощью Javascript в html-тег

#javascript #html #events #onclick #dom-events

#javascript #HTML #Мероприятия #onclick #dom-события

Вопрос:

У меня есть целевая страница с динамическими HTML-тегами. Проблема в том, что я не могу выбрать тег напрямую. Это ссылка. следующий код представляет собой конструкцию:

 <div id="testid"><div><div><a href="#">Button 1</a><div><div><div>

Каждый раз, когда кто-то нажимает на ссылку (a-tag) Я хочу запустить событие, подобное следующему коду:

 <a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});">Button 1</a>

вопрос: какой код на Javascript используется для добавления onclick="dataLayer.push({'event': 'button1-click'}) атрибута в тег a.

Я попробовал следующий код:

 var d = document.getElementById("testid").firstchild;
d.setAttribute("onclick", "dataLayer.push({'event': 'button1-click'})");

но коду кажется, что это неверно. a Тег также не является первым дочерним; между ними есть 2 раздела: (

1. developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

2. у вас отсутствуют кавычки вокруг id=»testid»

3. Используйте document.querySeletor('#test a')

4. хорошо; я исправляю это. Но проблема не в кавычках

5. В этом HTML <a> не является прямым дочерним элементом #testid . Можете ли вы опубликовать HTML, который у вас действительно есть, с надлежащими отступами?

Ответ №1:

Используйте querySelector и addEventListener :

 document.addEventListener('DOMContentLoaded', function () {
    var dataLayer = [];
    var d = document.querySelector("#testid a[name=button1]");
    d.addEventListener("click", function () {
        dataLayer.push({ 'event': 'button1-click' });
    });
});

 <!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="testid">
		<div>
			<div>
				<a href="#" name="button1">Button 1</a>
				<div>
					<div>
						<div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="script.js">

	</script>
</body>

</html>

Есть несколько вещей, которых вам не хватало в вашем JS.

Используя более конкретный селектор ( #testid a[name=button1] по сравнению с firstchild of #testid , который был неточным).
Перенос всего кода в DOMContentLoaded прослушиватель. JS, который зависит от элементов на странице, должен сначала дождаться сборки страницы, вот что DOMContentLoaded такое.

1. 2. не требуется, если скрипт находится под основным HTML.

2. @ChrisG, все еще лучшая практика.

3. Это субъективно, но, несмотря на это, это не «отсутствует в [OPs] JS».

4. @ChrisG, на самом деле мы этого не знаем. Фрагмент OP не указывает, когда загружается JS.

5. Если мы не знаем, отсутствует ли оно, это не «отсутствует». Может быть, у OP действительно есть оболочка, но размещен только соответствующий код, как и предполагалось?

Ответ №2:

Ознакомьтесь с моим решением. Надеюсь, это поможет.

 var d = document.querySelector("#testid a");
var dataLayer = []

d.onclick = function () {
  dataLayer.push({'event': 'button1-click'})
  console.log(dataLayer.length)
}

 <div id="testid"><div><div><a href="#">Button 1</a><div><div><div>