CODEWITHSUNDEEP
javascriptjquery
Faultde
Faultde

Reputation: 7

this.id not passing through function

I've read similar questions and tried a few different things but nothing has worked so far.

I am trying to use the id of a div, to call a variable and play a sound.

let kick = new Howl({
  src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});

$(".pad").click(function(e){
    
var target = e.target.id;
console.log(this.id);
target.play();

  
})
.pad {
    position: relative;
    display: inline-block;
    margin: auto;
    height: 40px;
    width: 55px;
    background: #594F4D;
    box-shadow: 1px 1px 1px grey;
    border-radius: 5px;
    padding: 1px;


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pad" id="kick"></div>

Upvotes: 0

Views: 72

Answers (3)

Himanshu Tanwar
Himanshu Tanwar

Reputation: 906

So what I understand from the question and code snippet is that you have a variable name same as the id of an HTML element, and you want to trigger the play method of the variable which matches the id.

A better way to keeping this information would be by using the data attribute, something like

<div class="pad" data-id="kick"></div>

But for now I am just giving a solution with id

First what you should do is keep all your instance created with new Howl into an object

let Howls = {};
Howls.kick = new Howl({
  src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});
// similarly add other sounds

Then in your click handler do this

$(".pad").click(function(e){        
var target = e.target.id;
if(Howls[target]){
 Howls[target].play();    
}
})

Upvotes: 1

Facundo Larrosa
Facundo Larrosa

Reputation: 3389

Use eval :

let kick = new Howl({
  src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});

$(".pad").click(function(e){
    
var target = e.target.id;
console.log(this.id);
eval(target).play();

  
})
.pad {
    position: relative;
    display: inline-block;
    margin: auto;
    height: 40px;
    width: 55px;
    background: #594F4D;
    box-shadow: 1px 1px 1px grey;
    border-radius: 5px;
    padding: 1px;


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pad" id="kick"></div>

Upvotes: 0

Aur&#233;lien Bottazini
Aur&#233;lien Bottazini

Reputation: 3309

Replace target.play with kick.play

let kick = new Howl({
  src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});

$(".pad").click(function(e){
    
var target = e.target.id;
console.log(this.id);
kick.play();

  
})
.pad {
    position: relative;
    display: inline-block;
    margin: auto;
    height: 40px;
    width: 55px;
    background: #594F4D;
    box-shadow: 1px 1px 1px grey;
    border-radius: 5px;
    padding: 1px;


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pad" id="kick"></div>

Upvotes: 0

Related Questions