# 2 questions in one post:) - ui messages and code

**URL:** <https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875>\
**Category:** Dashboard\
**Created:** [18 August 2021 12:50 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875 "2021-08-18T12:50:48Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [19 August 2021 07:38 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/7 "2021-08-19T07:38:37Z")

</div>

> [@paulalsmith1000](#):
>
> It still doesn't work though sadly?

It wont, you arent doing anything with the payload...

```auto
<div>--{{$value}}--</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      
      $(scope.$value = msg.payload * 100); // << where is the document.querySelector code?
    }
  });
})(scope);
</script>

```

Try changing it to...

```auto
<div>
  <img id="img" src="http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png" />  
</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg && msg.topic == "rotate") {
      // Do something when msg arrives with topic "rotate"
      document.getElementById("img").style.transform = "rotate(" + msg.payload + "deg)";
    }
  });
})(scope);
</script>

```

Demo flow...

```auto
[{"id":"6567d73c.b95a18","type":"inject","z":"5e6c8b.7f38b374","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"rotate","payload":"$ceil($random()*500)","payloadType":"jsonata","x":738,"y":1808,"wires":[["27576b17.de0624"]]},{"id":"27576b17.de0624","type":"ui_template","z":"5e6c8b.7f38b374","group":"8b5cde76.edd58","name":"","order":8,"width":"12","height":"9","format":"<div>\n <img id=\"img\" src=\"http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png\" /> \n</div>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg && msg.topic == \"rotate\") {\n // Do something when msg arrives with topic \"rotate\"\n document.getElementById(\"img\").style.transform = \"rotate(\" + msg.payload + \"deg)\";\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":863,"y":1808,"wires":[["efa8201a.f96fc8"]],"l":false},{"id":"efa8201a.f96fc8","type":"debug","z":"5e6c8b.7f38b374","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":998,"y":1808,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f0a9cf63377178c5d84b31e5d419b84f81298a94.jpeg)

---

_[View the full topic](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875)._