CODEWITHSUNDEEP
javascriptjqueryhtml
GROVER.
GROVER.

Reputation: 4378

setting object through variable containing strings not working

I have developed a pretty basic audio player on on my website similar to SoundClouds.

I have managed to successfully finish it, and I am starting to clean up all the markup, including (trying) removing all inline event handlers (i.e: onclick="" or onkeyup="").

However, I have come across a bit of a problem in my JavaScript whilst doing this.

It's a bit hard to explain so I'm going to post my JavaScript, then give you an idea of what the problem is:

$(".track-w__trigger").click(function(){
    var tid = $(this).attr('aria-trackid'); // aria-trackid is equal to a random integer created by PHP
    var tiW = 'w' + tid + 'w'; // this is an object (i.e: w3w)
    playPauseButton(this, tiW, ti);
});

function playPauseButton(button, wave, trackID){
    var button = $(button);

    if(wave.isPlaying()){ // the object (w3w.isPlaying())
        button.removeClass("playing");
        wave.pause();
    } else {
        button.addClass("playing"); 
        wave.play();
    }
}

What I used to have was 

<div class="track-w__trigger" onclick="playPauseButton(this, w3w, 3)" id="w3w-trigger"></div>

and now it is:

<div class="track-w__trigger" aria-trackid="3" id="w3w-trigger"></div>

As you can see in the second block of code. w3w is an object. However, because I have set it using my click function in a separate script using string quotes. JavaScript has gone ahead and made it a string.

So now when I use wave.isPlaying() for example; it does nothing.

I have no idea how to fix this, and no result on Google will help me. Any help in fixing this issue would be greatly appreciated,

Thanks!

EDIT:

This is where & how w3w is set:

var w3w = Uki.start({
    // e.t.c
});

Upvotes: 0

Views: 50

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

Use eval wave = eval(wave); to evaluate the string as a function

or use a safer way 

wave = window[wave];

https://jsfiddle.net/zmr412q7/

Upvotes: 1

GraveyardQueen
GraveyardQueen

Reputation: 769

You can try something like this,

var tid='w'+5+'w';
var tryout=tid.valueOf();
console.log("getting the object "+tryout)

The valueOf property converts the string to an object

Upvotes: 0

Joe
Joe

Reputation: 2540

Instead of having each object as a seperate variable, create an object that contains each object at the id representing the N in wNw. Ex:

var wNw = {};

// represents w1w
wNw[1] = (Uki.start({
    // e.t.c
}));

// represents w17w
wNw[17] = (Uki.start({
    // e.t.c
}));

// represents w3w
wNw[3] = (Uki.start({
    // e.t.c
}));

This gives you an object that looks like:

{
   1: object_that_was_w1w
   17: object_that_was_w17w
   3: object_that_was_w13w
}

And then your click handler looks like this:

$(".track-w__trigger").click(function(){
    var tid = $(this).attr('aria-trackid'); // aria-trackid is equal to an integer of 1 to 5
    var tidNum = parseInt(tid);
    playPauseButton(this, wNw[tidNum], ti);
});

Upvotes: 0

Related Questions