CODEWITHSUNDEEP
javascript
user10486741
user10486741

Reputation:

Click event: switch statement not working

I´m trying to trigger multiple click events depending on the var clicked, however the switch statement isn´t working. I think it´s the "var" inside the Switch parameter but I have no idea how to correct it:

var buttonQ = document.getElementById('Heater1button');
var buttonW = document.getElementById('Heater2button');
var buttonE = document.getElementById('Heater3button');
var buttonA = document.getElementById('Heater4button');
var buttonS = document.getElementById('Heater6button');
var buttonD = document.getElementById('OpenHHbutton');
var buttonZ = document.getElementById('KicknHat');
var buttonX = document.getElementById("Kickbutton");
var buttonC = document.getElementById('CClosedHHbutton');

$(document).click(function() {
  switch (var) {
    case buttonQ:
      document.getElementById('Q').play(), $("#displaytext").text("Heater 1")
      break;
    case buttonW:
      document.getElementById('W').play(), $("#displaytext").text("Heater 2")
      break;
    case buttonE:
      document.getElementById('E').play(), $("#displaytext").text("Heater 3")
      break;
    case buttonA:
      document.getElementById('A').play(), $("#displaytext").text("Heater 4")
      break;
    case buttonS:
      document.getElementById('S').play(), $("#displaytext").text("Heater 6")
      break;
    case buttonD:
      document.getElementById('D').play(), $("#displaytext").text("Open HH")
      break;

    case buttonZ:
      document.getElementById('Z').play(), $("#displaytext").text("KicknHat")
      break;
    case buttonX:
      document.getElementById('X').play(), $("#displaytext").text("Kick")
      break;
    case buttonC:
      document.getElementById('C').play(), $("#displaytext").text("Closed HH")
      break;
  }
})

Upvotes: 0

Views: 1939

Answers (4)

RedPandaz
RedPandaz

Reputation: 6286

Something like this?

$(document).click(function(e) {
var id = e.target.id;
  switch (id) {
    case "Heater1button":
      document.getElementById('Q').play(), $("#displaytext").text("Heater 1")
      break;
    case "Heater2button":
      document.getElementById('W').play(), $("#displaytext").text("Heater 2")
      break;
  }
});

Upvotes: 0

Aurora Tiffany-Davis
Aurora Tiffany-Davis

Reputation: 11

You are switching on var, which itself does not appear to exist from the code you have provided. You need to know what was clicked, so you need to use what the jQuery .click() method provides - "this". Or perhaps in your case you should switch on $(this).attr("id").

See this: https://api.jquery.com/click/

Upvotes: 0

Barmar
Barmar

Reputation: 781741

You shouldn't use a switch statement, use event listeners attached to each element.

buttonQ.addEventListener("click", function() {
    document.getElementById('Q').play(), $("#displaytext").text("Heater 1");
});
buttonW.addEventListener("click", function() {
    document.getElementById('W').play(), $("#displaytext").text("Heater 2");
});

and so on for all the buttons.

Upvotes: 2

wosevision
wosevision

Reputation: 133

You're correct, the issue is the var inside the switch statement. What variable does this refer to? A switch statement is used to "check the result of a and do one of x, y, etc". In your example I don't see any declaration of a value called "var" that the switch is using to evaluate what case to run.

In any event, even if you did have a variable somewhere else in your code called var, it won't work because that is a reserved word. You can't name a variable using the word you use to name variables.

Upvotes: 0

Related Questions