# Simple script on UI template not working

**URL:** <https://discourse.nodered.org/t/simple-script-on-ui-template-not-working/18393>\
**Category:** Dashboard\
**Created:** [25 November 2019 12:21 UTC](https://discourse.nodered.org/t/simple-script-on-ui-template-not-working/18393 "2019-11-25T12:21:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)\
**Post date:** [25 November 2019 12:21 UTC](https://discourse.nodered.org/t/simple-script-on-ui-template-not-working/18393/1 "2019-11-25T12:21:16Z")

</div>

Hello guys so I have this simple html on UI template.  
What it does is it gets input data from other nodes. Now I want the button  
to do something when I clicked it, but if feels like its not working on the function  
defined (I am not actually familiar with Scopes, watch etc in Javascript) can somebody help  
me how to do it? I just want 2 function on my UI template.

1. One that recieved msg.payload from Input.
2. On click button that when pressed, it changes the color of the button.

 ![html script](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/273e4be32b4ec1dbe5efbb07c63652ffbcafde2f.jpeg)

```auto
<script>

(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
        var batchid = msg.batchid;
        if (msg.payload =="off" || msg.payload == 0){
                document.getElementById("oven1_timer").innerHTML = "TIMER EXPIRED";
                document.getElementById("oven1_timer").style.backgroundColor = "#6E0A1E";
                
        }else{
            document.getElementById("oven1_timer").innerHTML = msg.hremain + "h " + msg.mremain + "m " + msg.sremain + "s";
            if (msg.payload <= 300){
                document.getElementById("oven1_timer").style.backgroundColor = "#6E0A1E";
            }else{
                document.getElementById("oven1_timer").style.backgroundColor = "#D1790E";
            }
        }
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);

</script>
<md-button id="oven1_timer" ng-click="clearTimer()" style="font-size:18px">
    hh:mm:ss
</md-button>

```

---

<div class="post-metadata">

**Author:** ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)\
**Post date:** [25 November 2019 12:24 UTC](https://discourse.nodered.org/t/simple-script-on-ui-template-not-working/18393/2 "2019-11-25T12:24:27Z")

</div>

on the button ng-click to trigger the "ClearTimer()" function. however when I created the  
clearTimer on , the function did not function well. I don't know where I am going to put the "clearTimer" function. it seems that the function(scope) {} that was first define in my UI template blocked any other function. I dont know if my observation is correct here. Can someone help me? Thank you very much !