import 'dart:html'; |
import DOM |
import 'dart:async'; |
import timer |
Create variables using html |
ButtonElement btn = querySelector('#myButton') as ButtonElement; |
| |
connect button with id myButton to the btn variable |
ParagraphElement output = querySelector('#output') as ParagraphElement; |
| |
connect button with id output to the output variable |
DivElement divc = querySelector('#divv') as DivElement; |
| |
connect container with id divv to the divc variable |
FormElement form = querySelector('#myForm') as FormElement; |
| |
connect form with id myForm to the form variable |
working with html variables |
btn.onClick.listen((MouseEvent e) { code }); |
| |
listen the button |
output.text = 'Pressed!'; |
| |
Add text to output variable |
output.style.color = 'blue'; |
| |
add style to output element |
output.id = 'asd'; |
| |
add id to the object |
container.style.display = 'block'; |
container-name | none or block |
| |
show/hide element |
| |
ParagraphElement newElem = ParagraphElement() |
TAB ..id = 'newParagraph' |
TAB ..text = 'new text'; |
container.append(newElem); |
container - name of container | newElem - name of variable |
Create paragraph with teg and text |
| |
Future.delayed(Duration(seconds: 2), () { code }); |
| |
2sec timer |
| |
window.onKeyDown.listen((KeyboardEvent event) { code }); |
output.text = 'Key: ${event.code}'; |
hearing key pressing and print the key |
| |
form.onSubmit.listen((Event e) { |
TAB e.preventDefault(); |
TAB InputElement nameInput = querySelector('#name') as InputElement; |
TAB InputElement emailInput = querySelector('#email') as InputElement; |
TAB String name = nameInput.value ?? ''; |
TAB String email = emailInput.value ?? ''; |
}); |
| |
form |