Неработающий код (HTML + JS)

[Geen]

Connector в сообщении #1462498 писал(а):

А здесь последний слеш был лишний.

Вот, именно в этом дело!

[kotenok gav]

Connector,

Используется синтаксис Javascript

let width = 500;
let height = 420;
let draw = document.createElementNS("http://www.w3.org/2000/svg", "svg");
draw.setAttributeNS(null, "viewBox", "0 0 " + width + " " + height);
draw.setAttributeNS(null, "width", width);
draw.setAttributeNS(null, "height", height);
game.append(draw);
let tail = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
tail.setAttribute('points', '10,10 100,10 55,100');
tail.setAttribute('fill', 'orange');
tail.setAttribute('stroke', 'black');
tail.onclick = function(event) {
        alert('1');
};
draw.append(tail);

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

[Connector]

В таком случае вынужден констатировать, что код не воспроизводит проблему: у меня всё работает.
Ссылка на CodePen.

Возможно, ошибка где-то в остальном коде.

[kotenok gav]

Хм, так оно тоже работает. В моем коде потом дальше идет строчка game.innerHTML += '<br>';, и при добавлении ее в ваш CodePen оно ломается.

[Geen]

kotenok gav в сообщении #1462754 писал(а):

потом дальше идет строчка game.innerHTML += '<br>';,

Это Вы очень плохо придумали...

[kotenok gav]

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML писал(а):

It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element.

Теперь ясно, кажется. Обычный innerHTML стирает обработчики.

[Connector]

kotenok gav,

innerHTML+=

это очень коварная штука — полностью перезаписывает содержимое элемента. Используйте метод insertAdjacentHTML.

-- 14.05.2020, 20:04 --

UPD. Вот именно.

[kotenok gav]

Уррррра! Теперь работает!!
Geen, Connector, спасибо!

[Geen]

kotenok gav в сообщении #1462773 писал(а):

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML писал(а):

It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element.

Теперь ясно, кажется. Обычный innerHTML стирает обработчики.

Вы навесили обработчик через JS и нет способа отобразить это в виде HTML атрибутов.

-- 14.05.2020, 20:11 --

вообще, лучше избегать использовать innerHTML и аналоги без нужды. Нужда может быть когда Вы хотите вставить очень большой кусок HTML, например, большую таблицу заполнили или список - в этом случае будет быстрее за счёт того, что DOM дерево не будет перестраиваться. А иначе больше времени уйдёт на парсинг. Кроме того, через HTML не получится эффективно навесить обработчики - на каждый аттрибут с кодом создаётся своя уникальная функция из указанной строки.

[kotenok gav]

Вот еще вопрос возник:
https://jsfiddle.net/nbd1wkfv/ (не работает даже при замене двух строчек перед комментарием на закомментированные)
При нажатии на квадрат в месте должен появляться кружок color-picker-square-picker, но не появляется.

[Geen]

А какого размера у Вас picker?

[kotenok gav]

Кружок - 7 на 7 пикселей. Сам квадрат - 100 на 100.

[Geen]

Что именно 100 на 100?

[kotenok gav]

Пикселей.

[Geen]

Так, прошу прощения - не то увидел в коде...