I wanted to implement a conditional continue link, based on what was typed into an <input>. It has been a while so I had to remind myself.
First we need to be able to hide the link.
@styles {
.hidden {
display: none;
}
}
@card c_test {
content: ```
<a card="c_test_next" class="hidden">Continue</a>
```
}
Now we need the input whose value will enable the link. We add the rez-live attribute which automatically generates an on_input event whenever the input value changes.
@styles {
.hidden {
display: none;
}
}
@card c_test {
content: ```
<input type="text" rez-live />
<a card="c_test_next" class="hidden">Continue</a>
```
on_input: (card, params) => {
// When the input changes we'll get notified
}
}
Now we tie the pieces together, giving the link an id attribute so we can target it:
@styles {
.hidden {
display: none;
}
}
@card c_test {
content: ```
<input type="text" rez-live />
<a id="continue-link" card="c_test_next" class="hidden">Continue</a>
```
on_input: (card, params) => {
const hidden = params.evt.target.value.length < 3;
document.getElementById("continue-link").classList.toggle("hidden", hidden);
}
}
This presents the card with the link initially hidden. If more than 2 characters are typed into the input the link will become visible.
If I also want this value stored somewhere I can use the rez-bind="#id.attrName" attribute to bi-directionally bind the input value to an attribute of an element.
@player {
$global: true # so we can use $player to refer to the object
user_value: "a"
}
@styles {
.hidden {
display: none;
}
}
@card c_test {
content: ```
<input type="text" rez-live rez-bind="player.user_value" />
<a id="continue-link" card="c_test_next" class="hidden">Continue</a>
```
on_input: (card, params) => {
const hidden = params.evt.target.value.length < 3;
document.getElementById("continue-link").classList.toggle("hidden", hidden);
}
}
Now the card will present the <input> field with "a", the initial value of the attribute user_value on #player. When the <input> value changes, $player.user_value will track it. If another handler was to modify $player.user_value the input field would be updated also.
Note that in our on_input handler we don’t use hidden = $player.user_value.length < 3. This is because there’s is no reliable way to ensure the order of the underlying events. If the on_input runs before the bind handler you’d get the old value. Hence we reference the value of the input directly.
