Detect which button was pressed (html) and change variable in (js)

Asked

Viewed 65 times

1

I have an interface where I have several buttons and each one represents an instrument.
When I press, to select the instrument I want, I have to change the library variable I’m using.
Something like: Loads piano (html) knob and changes in js the var selectedPreset = (corresponding instrument number).

I can detect which buttons are being clicked but I can’t change the variable through the function. If you Return directly from the piano, it works, but inside the if, it doesn’t work.

<div class="Instrumentos" >
   <button class="fas fa-play" name="piano" ></button>
   <button class="fas fa-play" name="guitar" ></button>





var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", message);
}

function message(som) {
  var piano = _tone_0000_SBLive_sf2
  var guitar = _tone_0240_SBLive_sf2
  var name = this.name;
  var som 
  if (name == "piano") {
    som = piano
    console.log(som)
    return som
    //alert("Piano");
  } else if (name == "guitar") {
    som = guitar
    alert("Guitarra");
  }
  return som

}

var selectedPreset = message()
javascript html

  • Your selectedPreset performs the function message() as soon as Javascript is loaded, and not at the click of the button, so you cannot "change the value of the variable". Another detail is that the function message(som) receives a parameter that does not use...

  • but @Rafaeltavares, and the line buttons[i].addEventListener("click", message); linking the click event to the fuction message?

  • @Ricardopunctual did not understand. This line will work, but still will not change the value of selectedPreset, since he is out of function message.

  • the problem I saw with this piece of code are the variables _tone_0000_SBLive_sf2 and _tone_0240_SBLive_sf2 that are not defined... your code can have several improvements, such as the variable som that @Rafaeltavares has already mentioned, that is not being passed to Function and, seeing me, does nothing useful in Function, is this variable that mentioned in the question that wants to change?

  • 1

    @Rafaeltavares what I meant is, about your comment "execute the message() function as soon as Javascript is loaded, not at the click of the button", when you click the function is executed in it, it is not well explained, that’s it. click tbm is executed

  • What I want to do is that each button has one of those variables associated with tone, because that’s what makes selectedPreset work. If you press the piano button, the variable had to change to _tone_0000_SBLive_sf2, if it was on the guitar, it changed to _tone_0240_SBLive_sf2 ....

  • Where is return som change to selectedPreset = som

  • @Thank you very much... As I said I have little experience and this detail obviously made all the difference... Thank you!

  • I’m supposed to erase the question?

  • Leave open maybe a younger user want to take advantage of my comment and submit a response to gain reputation. Or a more experienced user want to take advantage of the question to guide about the programming style. I have no interest in answering, because if I had.

Show 5 more comments

1 answer

2


The question and the code presented are a little confused, but it seems that the intended is to identify which button was pressed and change a variable accordingly. Assuming this as a premise, you can do as in the code below.

PS: I took the liberty of making some changes to make it easier to read and understand the code. 

var selectedPreset;
var piano = "_tone_0000_SBLive_sf2"; // transformado em string para testes
var guitar = "_tone_0240_SBLive_sf2"; // transformado em string para testes

var buttons = document.getElementsByTagName("button"); // é melhor fazer outro tipo de seleção, pois podem haver outros botões na página

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", SelectInstrument);
}

function SelectInstrument(){
  alert('Escolheu: ' + this.name); // essa linha só serve para vc verificar o funcionamento

  // caso o select dos botões seja mais restritivo poderia até substituir os if/else if para pegar um atributo diretamente do elemento apertado
  if (this.name == "piano") {
    selectedPreset = piano;
  } else if (name == "guitar") {
    selectedPreset = guitar;
  }
}

// A linha abaixo não faz sentido. Para definir um valor default atribua diretamente à variável.
// Com o código apresentado ela não será um problema, mas não fará nada com a variável selectedPreset.
//var selectedPreset = SelectInstrument();
<div class="Instrumentos" >
   <button class="fas fa-play" name="piano">piano</button>
   <button class="fas fa-play" name="guitar">guitar</button>
</div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.