Trying to reduce repetition of javascript using a variable

Question

I am trying to reduce the repetition in my code but not having any luck. I reduced the code down to its simplest functionality to try and get it to work.

The idea is to take the last two letters of an id name, as those letters are the same as a previously declared variable and use it to refer to the old variable.

I used the alert to test whether I was getting the right output and the alert window pops up saying "E1". So I am not really sure why it wont work when I try and use it.

E1 = new Audio('audio/E1.ogg');

$('#noteE1').click(function() {
    var fileName = this.id.slice(4);
    //alert(fileName); used to test output
    fileName.play();
    $('#note' + fileName).addClass('active');
});

The code block works when I use the original variable E1 instead of fileName. I want to use fileName because I am hoping to have this function work for multiple elements on click, instead of having it repeated for each element.

How can I make this work? What am I missing?

Thanks.

T.J. Crowder · Accepted Answer · 2011-06-26 10:32:27Z

5

fileName is still a string. JavaScript does not know that you want to use the variable with the same name. You are calling the play() method on a string, which of course does not exist (hence you get an error).

Suggestion:

Store your objects in a table:

var files = {
    E1: new Audio('audio/E1.ogg')
};

$('#noteE1').click(function() {
    var fileName = this.id.slice(4);
    //alert(fileName); used to test output
    files[fileName].play();
    $('#note' + fileName).addClass('active');
});

Another suggestion:

Instead of using the ID to hold information about the file, consider using HTML5 data attributes:

<div id="#note" data-filename="E1">Something</div>

Then you can get the name with:

var filename = $('#note').data('filename');

This makes your code more flexible. You are not dependent on giving the elements an ID in a specific format.

edited Jun 26, 2011 at 10:32

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

answered Jun 26, 2011 at 10:18

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

4 Comments

tw16 Over a year ago

I tried your first suggestion, but unfortunately it didn't work. The file would not play.

T.J. Crowder Over a year ago

+1, though I don't agree about the id thing. The ID has to be unique anyway, no particular reason not to use it to index into files and adding the data- attribute just adds to the size of the markup.

T.J. Crowder Over a year ago

@tw16: "The file would not play." I just fixed a minor syntax error in Felix's code (there shouldn't be a ; at the end of the E1: ... line). Try the update. Other than the syntax error, the recommendation is bang-on.

tw16 Over a year ago

Thanks a lot. With the corrected syntax it works as expected.

Collectives™ on Stack Overflow

Trying to reduce repetition of javascript using a variable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related