Атрибут кнопки «onclick» в HTML-кнопке вызывает функцию перед нажатием

Question

Я пытаюсь использовать d3.select для создания кнопки в DOM с атрибутом onclick, чтобы при нажатии на кнопку вызывалась какая-то функция. Однако, прежде чем я нажму на кнопку, функция просто вызывает сама себя. Вот мой код JS:

var something = function() {
     console.log("do something");
}


d3.select("#done")
    .append("button")
    .text("Button Text")
    .attr("onclick", something);

, а вот мой HTML-код (есть нечто большее, но это важная часть):

<div id="done"></div>

Когда я выполняю код, что-тоФункция сразу вызывается и выводится на консоль. Как я могу это исправить?

Заранее извиняюсь, если это кажется действительно наивным - я очень новичок в этом.

Answer 1

Вместо использования attr("onclick", something), который немедленно вызовет функцию, установите прослушиватель событий, используя selection.on:

var something = function() {
  console.log("do something");
}

d3.select("body")
  .append("button")
  .text("Button Text")
  .on("click", something);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Чтобы вы поняли, почему something был вызван в вашем коде, даже если у него нет скобок (например, something()), документация для selection.attr объясняет, что:

[...] если значение является функцией, оно оценивается для каждого выбранного элемента.

сказал, что вы оцениваете функцию (и, следовательно, регистрируете сообщение в консоли). Также имейте в виду, что ваша функция возвращает undefined, и поэтому вы не добавляете никаких атрибутов.