Label wil not changed in value

[mangakissa]

This small demo increases my label with 1.

Code: Pascal  [Select][+][-]

1. program test5;
2.  
3. {$mode objfpc}
4.  
5. uses
6.   JS, Classes, SysUtils, Web;
7.  
8. Type
9.  
10. { TDemoform }
11.  
12. TDemoform = class
13.   Panel, Panel2 : TJSElement;
14.   Item1 : TJSElement;
15.   Button : TJSElement;
16.   teller : integer;
17.  
18.   constructor create;
19.   procedure CreateElements;
20. private
21.   procedure CreateLabel(aPanel, aItem: TJSElement; const aCaption: string);
22. public
23.   function ButtonClick(Event: TJSMouseEvent): boolean;
24. end;
25.  
26. { TDemoform }
27.  
28. constructor TDemoform.create;
29. begin
30.   teller := 1;
31.   CreateElements;
32. end;
33.  
34. procedure TDemoform.CreateLabel(aPanel, aItem : TJSElement; const aCaption : string);
35. begin
36.   aItem := document.createElement('label');
37.   aItem.innerText:=aCaption;
38.   aItem['id'] := 'counter';
39.   aPanel.appendChild(aItem);
40. end;
41.  
42.  
43. procedure TDemoform.CreateElements;
44. begin
45.   Panel  :=document.createElement('div');
46.   document.body.appendChild(panel);
47.   Panel2  :=document.createElement('div');
48.   Panel2['id'] := 'mycounter';
49.   // attrs are default array property...
50.   CreateLabel(Panel2,Item1,'mycounter');
51.   Panel.appendChild(panel2);
52.   button :=document.createElement('input');
53.   button['id']   := 'index';
54.   button['type'] := 'button';
55.   button['value'] := 'counter';
56.   TJSHTMLButtonElement(button).onclick := @ButtonClick;
57.   Panel.appendChild(button);
58. end;
59.  
60. function TDemoForm.ButtonClick(Event: TJSMouseEvent): boolean;
61. var MyLabel : TJSHTMLElement;
62. begin
63.   teller := teller + 1;
64.   MyLabel := TJSHTMLElement(document.getElementById('counter'));
65.   MyLabel.innerText := IntToStr(teller);
66.   result := true;
67. end;
68.  
69. begin
70.   TDemoForm.create
71. end.
72.  

But when I have several elements on the form (input/ label and button) the last label will not increase.

Code: Pascal  [Select][+][-]

1. program test5;
2.  
3. {$mode objfpc}
4.  
5. uses
6.   JS, Classes, SysUtils, Web;
7.  
8. Type
9.  
10. { TDemoform }
11.  
12. TDemoform = class
13.   Panel, Panel2 : TJSElement;
14.   Item1 : TJSElement;
15.   Item2 : TJSElement;
16.   Item3 : TJSElement;
17.   Lblindex : TJSElement;
18.   Button : TJSElement;
19.   teller : integer;
20.  
21.   constructor create;
22.   procedure CreateElements;
23. private
24.   procedure CreateButton(aPanel, aItem: TJSElement; const aID: string;
25.     const aValue: string);
26.   procedure CreateEdit(aPanel, aItem: TJSElement; const aID: string; const aValue: string = '');
27.   procedure CreateLabel(aPanel: TJSElement; const aCaption: string); overload;
28.   procedure CreateLabel(aPanel, aItem : TJSElement; const aCaption : string); overload;
29. public
30.   function ButtonClick(Event: TJSMouseEvent): boolean;
31. end;
32.  
33. { TDemoform }
34.  
35. constructor TDemoform.create;
36. begin
37.   teller := 1;
38.   CreateElements;
39. end;
40.  
41. procedure TDemoform.CreateLabel(aPanel : TJSElement; const aCaption : string);
42. var MyLabel : TJSElement;
43. begin
44.   MyLabel := document.createElement('label');
45.   MyLabel.innerText:=aCaption;
46.   aPanel.appendChild(MyLabel)
47. end;
48.  
49. procedure TDemoform.CreateEdit(aPanel, aItem : TJSElement; const aID : string; const aValue : string);
50. begin
51.   aItem :=document.createElement('input');
52.   aItem['id']   := aID;
53.   aItem['type'] := 'text';
54.   if aValue > '' then
55.     aItem.innerText := aValue;
56.   aPanel.appendChild(aItem);
57. end;
58.  
59. procedure TDemoform.CreateButton(aPanel, aItem : TJSElement; const aID : string; const aValue : string);
60. begin
61.   aItem :=document.createElement('input');
62.   aItem['id']   := aID;
63.   aItem['type'] := 'button';
64.   if aValue > '' then
65.     aItem['value'] := aValue;
66.   aPanel.appendChild(aItem);
67. end;
68.  
69. procedure TDemoform.CreateLabel(aPanel, aItem : TJSElement; const aCaption : string);
70. begin
71.   aItem := document.createElement('label');
72.   aItem.innerText:=aCaption;
73.   aItem['id'] := 'counter';
74.   aPanel.appendChild(aItem);
75. end;
76.  
77.  
78. procedure TDemoform.CreateElements;
79. begin
80.   Panel  :=document.createElement('div');
81.   // attrs are default array property...
82.   Panel['class']:='panel panel-default';
83.   document.body.appendChild(panel);
84.   CreateLabel(panel,'item1');
85.   CreateEdit(panel, item1,'tekst1');
86.   CreateLabel(panel,'item2');
87.   CreateEdit(panel, item2,'tekst2');
88.   CreateLabel(panel,'item3');
89.   CreateEdit(panel, item3,'tekst3');
90.   Panel2  :=document.createElement('div');
91.   Panel2['id'] := 'mycounter';
92.   Panel.appendChild(panel2);
93.   CreateLabel(Panel2,Lblindex,inttostr(teller));
94.   CreateButton(panel, button,'btndoorgaan','doorgaan');
95.   TJSHTMLElement(button).onclick:=@ButtonClick;
96.  
97. end;
98.  
99. function TDemoForm.ButtonClick(Event: TJSMouseEvent): boolean;
100. var MyLabel : TJSHTMLElement;
101. begin
102.   teller := teller + 1;
103.   MyLabel := TJSHTMLElement(document.getElementById('counter'));
104.   MyLabel.innerText := IntToStr(teller);
105.   result := true;
106. end;
107.  
108. begin
109.   TDemoForm.create
110. end.                    
111.  

AFAIK I'm doing the same as the first code. But still it can't find the id of the element (i think). So there must be another approach to get the right label. But how?

[ps]

You can use 'data-*' attributes.

Something like this:

Code: Pascal  [Select][+][-]

1. element.Attrs['data-id']:= 'your id';

and in on click event:
element.addEventListener('click', @OnBtnClick);

Code: Pascal  [Select][+][-]

1. function OnBtnClick(E: TJSEvent): Boolean;
2.  
3. ...
4.    TJSHTMLElement(E.currentTarget).Attrs['data-id']
5.  

[PascalDragon]

AFAIK I'm doing the same as the first code. But still it can't find the id of the element (i think). So there must be another approach to get the right label. But how?

You are never creating an element with ID counter. You call the CreateLabel with two arguments that never set the id attribute, thus the element will never be found.
You should adjust your CreateLabel to create a label element with a unique ID (just like CreateEdit and CreateButton do) and then use that ID.