Reload image without refreshing page-CodePudding

I have little experience with javascript, I'm trying to make the image update but I'm not succeeding. This image comes through an API

image here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

<script type="text/javascript">

   window.onload = function(){

      setInterval("atualizarqr()",3000); // troca imagem a cada 3 segundos      

   }

   function atualizarqr(){

      var img = document.getElementById('img').src;     

     
         document.getElementById('img').src = "https://santoaleixo.com.br/wp-content/uploads/2018/11/Logo-Santo-Aleixo-3.png";
   }

</script>

<body onl oad="atualizarqr">
            <img src="" id="img"/>
        </body>

CodePudding user response：

A couple of issues with this code:

You create an img variable but do not use it. You can just remove the variable declaration altogether
You are passing in the function to setInterval but as a string, which is incorrect

Here is the updated code:

function atualizarqr() {
  document.getElementById("img").src = "https://santoaleixo.com.br/wp-content/uploads/2018/11/Logo-Santo-Aleixo-3.png";
}

window.onload = function () {
  // troca imagem a cada 3 segundos
  setInterval(atualizarqr, 3000);
};

CodePudding user response：

Try this

window.onload = function() {
    let counter = 0;
  setInterval(() => atualizarqr(), 3000); // troca imagem a cada 3 segundos } 
  function atualizarqr() {
        counter  
    console.log("called "   counter   " times")
    var img = document.getElementById('img').src;
    document.getElementById('img').src = "https://santoaleixo.com.br/wp-content/uploads/2018/11/Logo-Santo-Aleixo-3.png";
  }
}