How to call an html Function

Asked

Viewed 5,212 times

2

I have a website on html where the goal was to update a half-second image with a new one. Like a video surveillance. But I needed to know what the Function in html for the image to change. It may seem a very weak doubt but I am new in programming.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title> Cam1 </title>
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>
        function GetImage(){
            setTimeout(function(){
            document.getElementById("img").src = "images/yyy.bmp?t="+Date.now();
            },500);
        }
    </script>
</head>
<body>  
    <!-- não sei como fazer aqui-->
    <img id="img" src="images/yyy.bmp" style="width:304px;height:228px;"/>
</body>
</html>
javascript html

  • Your code is right. Just call the function GetImage. You can do it like this: <body onload="GetImage()">. Test to see if that’s what you were looking for. A doubt ?t="+Date.now(); why? the server will give new images with this query?

  • @Sergio did what he said and added the onload="Getimage()"> but instead of no body, I added the tag img, when there is your doubt, the code was built through several, and I’m no longer quite sure about what it does, but I know that without it the function cannot make the get of the image

  • "but instead of in the body, I believe in the tag img" - why? In fact it was best to use only the content of the function (only the setTimeout) and put this <script> at the bottom of the page before </body>. Test and tell if it worked.

  • @Sergio is not working, when I wear the body can simulate and test if I can? and I didn’t quite realize the part of using only the setTimeout

3 answers

1

Complementing Sergio’s comment, a small change should be made to his script.

Within the method setTimeout call the function GetImage() again because doing this all made that finish the time set it calls the function again. Thus getting your script:

<script>
    function GetImage(){
        setTimeout(function(){
            document.getElementById("img").src = "images/yyy.bmp?t="+Date.now();
            GetImage();
        },500);
    }
    // Executa a função.
    GetImage();
</script>

  • If the body take to load (more than 500ms) may happen that #img is not yet on the page and gives error. Hence I suggested calling GetImage(); in the onload of the body and not in the <script>. In that case, or <script> is at the bottom of the page, the function would not even be necessary: it could have only setTimeout no function around.

  • Living and learning, I get it, it’s just in case he was just calling right inside the setTimeout because if not only will run once.

  • Exactly, it only makes the first execution after 500ms.

  • @Thank you for the suggestion I will still test and see if it works, however I found a way to stay on as Sergio indicated

1


If that function GetImage() is only used to start the setTimeout and if you want the function to be called when the page loads, then you can simplify and do so:

<!DOCTYPE html>
<html lang="en">
<head> 
    <title> Cam1 </title>
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>  
    <img id="img" src="images/yyy.bmp" style="width:304px;height:228px;"/>

    <script>
        // Este script deve estar depois de todo o HTML
        var img = document.getElementById("img");
        setTimeout(function(){
            img.src = "images/yyy.bmp?t=" + Date.now();
        }, 500);
    </script>
</body>
</html>

0

With the help of @Sergio’s comments, I was able to resolve my question by doing the following to the code: 

<!DOCTYPE html>
<html lang="en">
<head> 
    <title> Cam1 </title>
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>
        function GetImage(){
            setTimeout(function(){
            document.getElementById("img").src = "images/yyy.bmp?t="+Date.now();
            },500);
        }
    </script>
</head>
<body>  
    <img id="img" onload="GetImage();" src="images/yyy.bmp" style="width:304px;height:228px;"/>
</body>
</html>

Just add onload="GetImage();" in Tag img for everything to work, I’m still waiting for a new response from @Sergio and if it turns out to be another suggestion from him.

Browser other questions tagged javascript html

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