[SOLVED] pas2js click listener
lazarus / 76-Pas2JS

----------------------------------------------------------------------
yus · 2020-05-03 20:27

I have a question about working with pas2js.
For demonstration i created simple application.
I have DIV element in HTML page.
Code: Text  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i <div
id="mydiv"></div>In pascal code i try add two additional <a> elements
to this DIV element.

Result HTML code
Code: Text  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i <div
id="mydiv">  <div>    <a href="#" id="myid0">VALUE0</a>  </div> 
<div>    <a href="#" id="myid1">VALUE1</a>  </div></div> Elements are
added, but when I add for these elements 'click' event listener,
'click' event work only for latest added element.

Code for add  OnClick.
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
project1; {$mode objfpc} uses  JS, Classes, SysUtils, Web; const  LINK
= '<div><a href="#" id="myid%d">VALUE%d</a></div>'; var 
TestHTMLElement: TJSHTMLElement;  i: integer;  LinkElement:
TJSHTMLLinkElement; function OnClick(aEvent: TJSMouseEvent):
boolean;begin  Writeln('Click');end; begin  writeln('Start'); 
TestHTMLElement := TJSHTMLElement(document.getElementById('mydiv')); 
if not Assigned(TestHTMLElement) then    writeln('not found'); 
TestHTMLElement.innerHTML := '';  for i := 0 to 1 do  begin   
TestHTMLElement.innerHTML := TestHTMLElement.innerHTML + format(LINK,
[i, i]);    LinkElement :=
TJSHTMLLinkElement(document.getElementById(format('myid%d',[i])));// 
 LinkElement.onclick := @OnClick;//  
 LinkElement.addEventListener('click', @OnClick);   
LinkElement.addEventListener('click',    procedure    begin     
writeln('OnClick');    end    );  end;  writeln('End');end.Where I'm
wrong?
Maybe there is another way to solve my problem?

example project in github https://github.com/seryal/pas2js_question

Thank you very much!

----------------------------------------------------------------------
yus · 2020-05-03 20:48

I Understood my mistake. 
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
TestHTMLElement.innerHTML := TestHTMLElement.innerHTML + format(LINK,
[i, i]);This code deletes previous element.