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