Label wil not changed in value
lazarus / 76-Pas2JS

----------------------------------------------------------------------
mangakissa · 2020-06-18 13:58

This small demo increases my label with 1.
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
test5; {$mode objfpc} uses  JS, Classes, SysUtils, Web; Type {
TDemoform } TDemoform = class  Panel, Panel2 : TJSElement;  Item1 :
TJSElement;  Button : TJSElement;  teller : integer;   constructor
create;  procedure CreateElements;private  procedure
CreateLabel(aPanel, aItem: TJSElement; const aCaption: string);public 
function ButtonClick(Event: TJSMouseEvent): boolean;end; { TDemoform
} constructor TDemoform.create;begin  teller := 1; 
CreateElements;end; procedure TDemoform.CreateLabel(aPanel, aItem :
TJSElement; const aCaption : string);begin  aItem :=
document.createElement('label');  aItem.innerText:=aCaption; 
aItem['id'] := 'counter';  aPanel.appendChild(aItem);end;  procedure
TDemoform.CreateElements;begin  Panel
 :=document.createElement('div');  document.body.appendChild(panel); 
Panel2  :=document.createElement('div');  Panel2['id'] :=
'mycounter';  // attrs are default array property... 
CreateLabel(Panel2,Item1,'mycounter');  Panel.appendChild(panel2); 
button :=document.createElement('input');  button['id']   := 'index'; 
button['type'] := 'button';  button['value'] := 'counter'; 
TJSHTMLButtonElement(button).onclick := @ButtonClick; 
Panel.appendChild(button);end; function TDemoForm.ButtonClick(Event:
TJSMouseEvent): boolean;var MyLabel : TJSHTMLElement;begin  teller :=
teller + 1;  MyLabel :=
TJSHTMLElement(document.getElementById('counter'));  MyLabel.innerText
:= IntToStr(teller);  result := true;end; begin 
TDemoForm.createend. But when I have several elements on the form
(input/ label and button) the last label will not increase.
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
test5; {$mode objfpc} uses  JS, Classes, SysUtils, Web; Type {
TDemoform } TDemoform = class  Panel, Panel2 : TJSElement;  Item1 :
TJSElement;  Item2 : TJSElement;  Item3 : TJSElement;  Lblindex :
TJSElement;  Button : TJSElement;  teller : integer;   constructor
create;  procedure CreateElements;private  procedure
CreateButton(aPanel, aItem: TJSElement; const aID: string;    const
aValue: string);  procedure CreateEdit(aPanel, aItem: TJSElement;
const aID: string; const aValue: string = '');  procedure
CreateLabel(aPanel: TJSElement; const aCaption: string); overload; 
procedure CreateLabel(aPanel, aItem : TJSElement; const aCaption :
string); overload;public  function ButtonClick(Event: TJSMouseEvent):
boolean;end; { TDemoform } constructor TDemoform.create;begin  teller
:= 1;  CreateElements;end; procedure TDemoform.CreateLabel(aPanel :
TJSElement; const aCaption : string);var MyLabel : TJSElement;begin 
MyLabel := document.createElement('label'); 
MyLabel.innerText:=aCaption; 
aPanel.appendChild(MyLabel)end; procedure TDemoform.CreateEdit(aPanel,
aItem : TJSElement; const aID : string; const aValue : string);begin 
aItem :=document.createElement('input');  aItem['id']   := aID; 
aItem['type'] := 'text';  if aValue > '' then    aItem.innerText :=
aValue;  aPanel.appendChild(aItem);end; procedure
TDemoform.CreateButton(aPanel, aItem : TJSElement; const aID : string;
const aValue : string);begin  aItem
:=document.createElement('input');  aItem['id']   := aID; 
aItem['type'] := 'button';  if aValue > '' then    aItem['value'] :=
aValue;  aPanel.appendChild(aItem);end; procedure
TDemoform.CreateLabel(aPanel, aItem : TJSElement; const aCaption :
string);begin  aItem := document.createElement('label'); 
aItem.innerText:=aCaption;  aItem['id'] := 'counter'; 
aPanel.appendChild(aItem);end;  procedure
TDemoform.CreateElements;begin  Panel
 :=document.createElement('div');  // attrs are default array
property...  Panel['class']:='panel panel-default'; 
document.body.appendChild(panel);  CreateLabel(panel,'item1'); 
CreateEdit(panel, item1,'tekst1');  CreateLabel(panel,'item2'); 
CreateEdit(panel, item2,'tekst2');  CreateLabel(panel,'item3'); 
CreateEdit(panel, item3,'tekst3');  Panel2
 :=document.createElement('div');  Panel2['id'] := 'mycounter'; 
Panel.appendChild(panel2); 
CreateLabel(Panel2,Lblindex,inttostr(teller));  CreateButton(panel,
button,'btndoorgaan','doorgaan'); 
TJSHTMLElement(button).onclick:=@ButtonClick; end; function
TDemoForm.ButtonClick(Event: TJSMouseEvent): boolean;var MyLabel :
TJSHTMLElement;begin  teller := teller + 1;  MyLabel :=
TJSHTMLElement(document.getElementById('counter'));  MyLabel.innerText
:= IntToStr(teller);  result := true;end; begin  TDemoForm.createend.
                    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 · 2020-06-22 15:13

You can use 'data-*' attributes.

Something like this:
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
element.Attrs['data-id']:= 'your id';
and in on click event:
element.addEventListener('click', @OnBtnClick);

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 function
OnBtnClick(E: TJSEvent): Boolean; ... 
 TJSHTMLElement(E.currentTarget).Attrs['data-id']

----------------------------------------------------------------------
PascalDragon · 2020-06-22 21:31

Quote from: mangakissa on June 18, 2020, 03:58:16 pmAFAIK 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.