Variable won't change in oscPort.on("message", function ()

[Ddvos]

Hello! First I want you to thank for making this library! It works very well, but now I run into a problem. When I declare a value outside the oscPort.on() function it won't change if I change the value in that function.

In this example, I declared ''color'' outside the oscPort.on() function and I changed it inside. But, when I use it again outside the function, itsn't changed.

   OSCMessage() {
         var color = '#233AB7';
        oscPort.on("message", function (oscMessage) {

        this.color = '#563AB7';

      });   
    console.log(color)
    }

I want to eventually set variables equal to the incoming OSC data. The library is working great I can already receive en send OSC data. But I want to use the data further in my code. I hope you can help me, thanks in advance!

[jean-emmanuel]

this.color and color (declared with a var statement) do not refer to the same variables. Your snippet suggests OSCMessage is a method of the object that should hold this particular value, in that case you might want to write something like:

class MyClass() {

    constructor() {

        this.color = '#563AB7'; // initial value

        // init oscPort here maybe ?

        oscPort.on("message", (oscMessage)=>{ 
            // arrow function to preserve this == MyClass instance
            // we could write this instead: oscPort.on("message", this.OSCMessage.bind(this))
            this.OSCMessage(oscMessage)
        });   
    }

    OSCMessage(oscMessage) {

        this.color = '#563AB7';
        // probably update this.color according to what's in the message instead

        console.log(this.color):

     }

}

[jean-emmanuel]

Snippet corrected on github, although it's merely an attempt to guess what you intend to do.

[colinbdclark]

Thanks for helping answer this issue, @jean-emmanuel, I really appreciate it!

[jean-emmanuel]

You're welcome :)

[Ddvos]

Hi @jean-emmanuel and @colinbdclark, thank you for your quick responses! Maybe I should be more clear. I want eventually to put the data from the oscPort.on() function in a variable 'color'. I used your code but itsn't working right I get the error: "this.OSCMessage is not a function"

export default {
  data() {
  return{
    color:[]   
  }}
  computed: {
       OSCincoming: function(){
          oscPort.on("message", (oscMessage)=> {

         console.log(oscMessage)// console log is working and shows the data;
         this.OSCMessage(oscMessage)
      });

    },
     OSCMessage: function(oscMessage){

      this.color = oscMessage

    },
}

I am using Vue.js so I don't have a constructor. I believe a constructor is running once at the beginning but the oscPort.on() function should run all the time. I hope you understand what I want to do, thanks for the help!

ps. I am trying to put all my code in the "insert code", but Github takes only part

[jean-emmanuel]

Hmm, it seems I've guessed it wrong :)

Unfortunately I'm not at all familiar with Vue.js so I wont be able to much here...

PS: multiple lines of code must be wrapped in triple back ticks: ```javascript here goes your code ```

[colinbdclark]

Sadly, @Ddvos, I'm also not familiar with Vue.js. It does sound like your issue relates to variable scoping in your code, rather than an issue with osc.js. I wish I could lend a hand, but perhaps there is a Vue.js forum or mailing list that might be able to help?

[Ddvos]

Hi @jean-emmanuel and @colinbdclark, I tried it without Vue.js and used pure Javascript than it works! So I think you are wright @colinbdclark and it has something to with scoping in Vue.js or something. I will try to ask it on a Vue.js forum, Thanks for your help!

[colinbdclark]

Good luck and keep us posted with your project, @Ddvos!

[Ddvos]

I solved my problem with the vue creatred() function. And I placed the oscPort.on("message", (oscMessage)=>{} in the Vue methods