kopparhavet/templates/roll-dialog.html

<div id="{{id}}" class="roll-dialog">
    <h1 style="text-align: center;">{{localize skillName}} ({{skillValue}})</h1>
    <label>{{localize "ROLL.OPENCLOSE"}}</label>
    <input type="button" name="openclosed" min="0" value="{{startopen}}" style="margin-bottom: 10px; min-height: 26px; min-width: 30px;" />
    <label name="notopenedorclosed" style="display: inline-block;">&nbsp;</label>
    <label name="closed" style="display: none;">{{localize "ROLL.CLOSED"}}</label>
    <label name="opened" style="display: none;">{{localize "ROLL.OPENED"}}</label>
</div>

<script>
    (function() {
        const scope = document.getElementById("{{{id}}}");
        const input = scope.querySelector(`[name="openclosed"`);
        const closed = scope.querySelector(`[name="closed"`);
        const opened = scope.querySelector(`[name="opened"`);
        const none = scope.querySelector(`[name="notopenedorclosed"`);

        input.addEventListener("click", (event) => {
            event.target.value++;

            if(event.target.value > 0) {
                closed.style.display = "none"
                none.style.display = "none"
                opened.style.display = "inline-block"
            } else if(event.target.value < 0) {
                opened.style.display = "none"
                none.style.display = "none"
                closed.style.display = "inline-block"
            } else {
                opened.style.display = "none"
                closed.style.display = "none"
                none.style.display = "inline-block"
            }
        });
        input.addEventListener("contextmenu", (event) => {
            event.target.value--;

            if(event.target.value > 0) {
                closed.style.display = "none"
                none.style.display = "none"
                opened.style.display = "inline-block"
            } else if(event.target.value < 0) {
                opened.style.display = "none"
                none.style.display = "none"
                closed.style.display = "inline-block"
            } else {
                opened.style.display = "none"
                closed.style.display = "none"
                none.style.display = "inline-block"
            }
        });
    })();
</script>