2

Tenho dois inputs que possuem ambos um id, e possuo um botão com um evento oncick atrelado (diretamente no HTML) que recebe como paramento o value de ambos os campos input, agora pretendo separar o javascript em um arquivo separado porem não consigo fazer a ligação da função javascript, abaixo tudo acoplado no arquivo HTML:

<input type="file" id="imgPC">
<input type="text" id="imgWEB">
<input type="button" onclick="exibeImagem(imgPC.value, imgWEB.value)" id="btnEnviaImg" value="Enviar"/>
<script type="text/javascript">
     function exibeImagem(imgPCValue, imgWEBValue){
          alert(imgPCValue);
          alert(imgWEBValue);
     }
</script>

Como fiz com o arquivo separado (removi o onclick do input e coloquei o método dentro do arquivo separado) desta forma não funciona:

window.onload = function(){
     var btnEnviaImg = document.getElementById("btnEnviaImg");
     btnEnviaImg.addEventListener("click",exibeImagem(imgPC.value, imgWEB.value),false);
}
0

2 Respostas 2

4

Quando usas nomeFuncao(arg_A, arg_B) estás a correr a função. Ou seja o que o addEventListener vai usar como argumento é o que essa função retornar... não é isso que queres usar.

Se os IDs são fixos deves fazer assim:

btnEnviaImg.addEventListener("click", function(event){
    var imgPCValue = document.getElementById('imgPC').value;
    var imgWEBValue = document.getElementById('imgWEB').value;
    alert(imgPCValue);
    alert(imgWEBValue);
},false);

Também podes defenir a função à parte e passares como argumento depois:

function handler(event){
    var imgPCValue = document.getElementById('imgPC').value;
    var imgWEBValue = document.getElementById('imgWEB').value;
    alert(imgPCValue);
    alert(imgWEBValue);
}
btnEnviaImg.addEventListener("click", handler,false);

Se esses ID não são fixos ou queres ter uma relação no DOM entre o elemento clicado podes fazer assim, tendo em conta que o this dentro dessa função handler é o elemento clicado.

function handler(event){
    var imgPC = this.previousSibling;
    var imgWEB = imgPC.previousSibling;
    var imgPCValue = imgPC.value;
    var imgWEBValue = imgWEB.value;
    alert(imgPCValue);
    alert(imgWEBValue);
}
btnEnviaImg.addEventListener("click", handler,false);
3

Quando você passa uma função de callback como parâmetro é impossível passar parâmetros diretamente, pois quando você adiciona os parenteses, o js executa a função, ou seja, você está passando o resultado da função como parâmetro, e não a própria função.

O que você pode fazer é criar uma função anônima para chamar a função com os parâmetros desejados:

btnEnviaImg.addEventListener("click", function() {
    exibeImagem(imgPC.value, imgWEB.value);
}, false);
2
  • ,Oeslei ainda não funcionou, achou que haver com o fato de estar passando como parametros os value de dois inputs.
    – Ricardo
    Commented 10/04/2015 às 14:49
  • @RicardoHenrique A função exibeImagem está sendo chamada? Adicione um alerta no início dela para conferir.
    – Oeslei
    Commented 10/04/2015 às 14:50

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 .