40 lines
1023 B
Plaintext
40 lines
1023 B
Plaintext
|
<fieldset>
|
||
|
|
<legend>Show counter</legend>
|
||
|
|
<button onclick="ZjsComponent.send(this, 'showCounter');">Click Me</button>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Increment counter</legend>
|
||
|
|
<button onclick="ZjsComponent.send(this, 'increment', 11);">Increment</button>
|
||
|
|
<div name=counter-display>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
function onConnected() {
|
||
|
|
this.counter1 = 0;
|
||
|
|
this.counter2 = parseInt(this.getAttribute("counter-2"));
|
||
|
|
console.log("Connected");
|
||
|
|
}
|
||
|
|
|
||
|
|
function onDisconnected() {
|
||
|
|
console.log("Disconnected");
|
||
|
|
}
|
||
|
|
|
||
|
|
function showCounter(el) {
|
||
|
|
this.querySelector("[name=counter-display]").innerText =
|
||
|
|
`${this.counter1}: ${this.counter2}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function increment(amount) {
|
||
|
|
this.counter1 += amount;
|
||
|
|
this.counter2 += amount;
|
||
|
|
console.log(`${this.counter1}: ${this.counter2}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
exports.showCounter = showCounter;
|
||
|
|
exports.increment = increment;
|
||
|
|
exports.onConnected = onConnected;
|
||
|
|
exports.onDisconnected = onDisconnected;
|
||
|
|
</script>
|