setting object through variable containing strings not working

Question

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
});

you have set it in this place as a string isn't it ? var tiW = 'w' + ti + 'w'; and what is the ti variable will it change dynamically — GraveyardQueen
– GraveyardQueen, Commented Nov 18, 2016 at 5:19
@GraveyardQueen yeah, but because it has quotes, it is no longer an object. If I were to do var tiW = w + ti + w, it would give me an error. — GROVER.
– GROVER., Commented Nov 18, 2016 at 5:21

madalinivascu · Accepted Answer · 2016-11-18 06:20:36Z

1

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

or use a safer way

wave = window[wave];

https://jsfiddle.net/zmr412q7/

edited Nov 18, 2016 at 6:20

answered Nov 18, 2016 at 5:47

madalinivascu

32.4k4 gold badges42 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joe Over a year ago

eval is strongly discouraged.

GROVER. Over a year ago

@Joe whys that?

Joe Over a year ago

security.stackexchange.com/questions/94017/…

Joe · Accepted Answer · 2016-11-18 05:36:17Z

0

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);
});

edited Nov 18, 2016 at 5:36

answered Nov 18, 2016 at 5:26

Joe

2,5401 gold badge15 silver badges12 bronze badges

1 Comment

GROVER. Over a year ago

This won't work unfortunately :/ Due to PHP generating those numbers as the page is scrolled down (making the integer of 5 increase). I have made an edit to the comment in my post. Sorry

GraveyardQueen · Accepted Answer · 2016-11-18 05:36:52Z

0

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

answered Nov 18, 2016 at 5:36

GraveyardQueen

7691 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

setting object through variable containing strings not working

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related