0

Estou montando uma aplicação mobile que detecta beacons ao ativar o bluetooth do celular, utilizando o Evothings, que usa javascript e html5. Ao detectar os beacons, preciso que uma imagem troque para dar lugar à outra. Testando pelo codepen o código funciona, mas quando testo na aplicação, nada acontece e a imagem não troca.

HTML

"<html>
<body>
<img id="teste" src="http://db13.in/wp-content/uploads/2016/07/2000px-Dialog-error-round.svg_.png" width="160" height="120" onLoad="trocaImg(int);">
</body>
</html>"

JAVASCRIPT

var int = 2;
var img = document.getElementById("teste");
function trocaImg(int){
  if (int == 1)
    {
      img.src = "http://db13.in/wp-content/uploads/2016/07/2000px-Dialog-error-round.svg_.png";
    }
  else if (int == 2)
    {
      img.src = "https://t3.ftcdn.net/jpg/01/45/20/02/160_F_145200260_Mlts2v0PtYabB4v5dz1I8hKNCfieJidW.jpg";
    }
}
0

1 Resposta 1

1

Experimente trocar o nome da variável int, já que é uma palavra reservada do JavaScript. Também não há necessidade de passar um parâmetro para a função, já que a variável int estava declarada globalmente

var num = 2;
var img = document.getElementById("teste");
function trocaImg(){
//apenas para cunho de testes
setTimeout(function () {
  if (num == 1)
    {
      img.src = "http://db13.in/wp-content/uploads/2016/07/2000px-Dialog-error-round.svg_.png";
    }
  else if (num == 2)
    {
      img.src = "https://t3.ftcdn.net/jpg/01/45/20/02/160_F_145200260_Mlts2v0PtYabB4v5dz1I8hKNCfieJidW.jpg";
    }
    //garante que num fique alternando entre 1 e 2
    num = (num % 2) + 1;
    }, 1000);
}
<html>
<body>
<img id="teste" src="http://db13.in/wp-content/uploads/2016/07/2000px-Dialog-error-round.svg_.png" width="160" height="120" onLoad="trocaImg();">
</body>
</html>

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 .