JSFiddle - React, Tailwind, and code Playground

by tobint

HTML

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Event</title>
</head>
<body>
    <div id="output"></div>
    
    <input type="button" id="execute" value="-not-connected-"/>


    <input type="button" id="add" value="Event.add(..)"/>
    <input type="button" id="control2" value="remove by values"/>
    <input type="button" id="control3" value="remove by reference"/>

    <script type="text/javascript">
        var count = 0;
        var output = document.getElementById("output");
        var control = document.getElementById("control");
        var control2 = document.getElementById("control2");
        var control3 = document.getElementById("control3");
        var e;
        
        function render () {
            output.innerHTML = ++count;
        };
        
        (function () {
            function clickEvent () {
                if (Animation.isRunning()) { 
                    Animation.stop();
                    control.value = "start";
                } else { 
                    Animation.start();
                    control.value = "stop";
                }
            }
            
            function clickEvent2 () {
                Event.remove(control, "click", clickEvent, false);
            }
            function clickEvent3 () {
                Event.remove(e);
            }
        
            e = Event.add(control, "click", clickEvent, false);
            Event.add(control2, "click", clickEvent2, false);
            Event.add(control3, "click", clickEvent3, false);
            Animation.add(render);
        }());
    </script>
</body>
</html>