1

Tenho uma interface onde tenho vários botões e cada um representa um instrumento.
Quando carrego, para selecionar o instrumento que quero, tenho de mudar a variável da biblioteca que estou a usar.
Algo do género: Carrega botao piano (html) e muda no js o var selectedPreset = (número correspondente do instrumento).

Consigo detetar quais botões estão a ser clicados mas não consigo mudar a variável através da função. Se fizer return diretamente do piano , p.e., consegue funcionar, mas dentro do if, nao.

<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()
10
  • O seu selectedPreset executa a função message() logo que o JavaScript é carregado, e não no clique do botão, por isso você não consegue "mudar o valor da variável". Outro detalhe é que a function message(som) recebe um parâmetro que não usa... Commented 31/05/2020 às 11:06
  • mas @RafaelTavares, e a linha buttons[i].addEventListener("click", message); que associa o evento click à fuction message? Commented 31/05/2020 às 11:40
  • @RicardoPontual não entendi. Essa linha irá funcionar, mas mesmo assim não irá trocar o valor de selectedPreset, já que ele está fora da função message. Commented 31/05/2020 às 11:42
  • o problema que vi com esse pedaço de código são as variáveis _tone_0000_SBLive_sf2 e _tone_0240_SBLive_sf2 que não estão definidas... seu código pode ter várias melhorias, como a variável som que o @RafaelTavares já mencionou, que não está sendo passada para a function e, ao me ver, não faz nada de útil na function, é essa variável que mencionou na pergunta que quer mudar? Commented 31/05/2020 às 11:44
  • 1
    @RafaelTavares o que eu quis dizer é, sobre seu comentário "executa a função message() logo que o JavaScript é carregado, e não no clique do botão", quando clica a função é executada na mesma, isso não ficou bem explicado, é isso. No clique tbm é executada Commented 31/05/2020 às 11:45

1 Resposta 1

2

A pergunta e o código apresentado estão ujm pouco confusos, mas parece que o pretendido é identificar qual botão foi apertado e mudar uma variável de acordo. Assumindo isso como premissa, vc pode fazer como no código abaixo.

PS: Tomei a liberdade de fazer algumas alterações para facilitar a leitura e compreensão do código.

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .