Webassembly element event handling

Elements Oxygene
1

Can anyone give me an example of event handling in Webassembly (eg button click).

I have tried the following:

method HelloWorld;
begin
  writeLn('HelloWorld');
  var el := WebAssembly.GetElementById('helloWorld');
  if el = nil then begin
    writeLn('Element by ID test is null!');
    exit;
  end;
  var t2 := WebAssembly.CreateTextNode('Hello from Elements WebAssembly!');
  el.appendChild(t2);
  WebAssembly.GetElementById('btn1').onclick := new WebAssemblyDelegate(a -> DoButtonClick(a));
end;

method DoButtonClick(sender: dynamic);
begin
  writeLn('ID of clicked button = ' + sender.getAttribute('id'));
end;

end;

My html file includes a button element with id=“btn1”

But this creates the following exception from sender.getAttribute(‘id’)

!> Exception of type TypeError on thread 0001
!> Message: TypeError: Cannot read property ‘apply’ of undefined

Thank you

2

hi; we’re investigating what goes wrong here, I hope to get back to you later today or early tomorrow.

3

Oke so there’s two things:

  WebAssembly.GetElementById('btn1').onclick := new WebAssemblyDelegate(a -> DoButtonClick(a[0]));

Note the a[0] here, the args parameter is a javascript “arguments” object, it holds a javascript array of objects.
The second part of it is this:

method DoButtonClick(sender: dynamic);
begin
  writeLn('ID of clicked button = ' + sender.target.getAttribute('id'));
end;

Note the .target, the argument for an event is a MouseEvent which doesn’t have sender like that, it has inside the mouseevent object as target.

Note that the next version does:
RemObjectsElements.js:350 Uncaught Member getAttribute on [object MouseEvent] does not exist

Instead of the weird Apply error.

4

Fantastic, that worked great!
Tank you.

2 Likes