Как добавить событие с Javascript в HTML-тег - PullRequest
Новая
       55

Как добавить событие с Javascript в HTML-тег

2 голосов
/ 11 марта 2019

У меня есть целевая страница с динамическими тегами 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'}) к тегу.

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

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

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

Ответы [ 2 ]

1 голос
/ 11 марта 2019

Проверьте мое решение. Надеюсь, это поможет. 

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>
0 голосов
/ 11 марта 2019

Использование 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.

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