Не удается добавить событие onclick к элементу DOM

Question

Я создаю элемент ap внутри div (давайте назовем его «test-div»), и я хочу добавить к нему события onclick, я могу дать ему класс и идентификатор, но я получаю ошибки при добавлениипо щелчку. Он говорит, что имеет тип void. Мой код в основном такой:

var son = document.createElement("p");
var node = document.createTextNode("test");
son.appendChild(node);
var father = document.getElementById("test-div");
father.appendChild(son);
son.className = "son-class";
son.id="son-id";
son.onclick= sonFunction(randomVar); //Type 'void' is not assignable error

Ответ: son.addEventListener ("click", function () {sonFunction (randomVar)});

Answer 1

Вы пытаетесь изменить атрибут onclick, который ожидает строку, и присваиваете ей возвращаемое значение вашего sonFunction, который не имеет возвращаемого значения, следовательно (void).

Вы можете установить атрибут onclick со строкой, такой как:

son.onclick = 'sonFunction(randomVar);';

Это даст вам вывод HTML, похожий на:

<p class="son-class" onclick="sonFunction(randomVar);">
    ...
</p>

Однако вы, вероятно, захотите назначитьэто прослушиватель событий, который будет запускать событие при нажатии. Выполнение ниже не добавит атрибут onclick в HTML, но сохранит слушателя в компиляторе Javascript. Это часто называют «ненавязчивым» Javascript, поскольку код Javascript не встроен в HTML.

function sonFunction() {
    // something here
};
son.addEventListener('click', sonFunction);

или

son.addEventListener('click', function () {
    // something here
});