How to call a html function

Question

How to call a html function

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I have a site in html where the purpose was to update a half-second image in half a second with a new one. Same as video surveillance. But I needed to know how to call the function in html for the image to change. It may seem like a very weak question but I'm new to 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

asked by anonymous 30.08.2017 / 10:38

3 answers

1

Complementing Sergio's comment, you should make a small change to your script .

Inside the setTimeout method, call the GetImage() function again because doing this all did finish the set time it calls the function again. So 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>

30.08.2017 / 10:46

0

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

<!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>

I just added onload="GetImage();" to Tag img to get everything working, I'm still waiting for a new response from @Sergio and if I put another suggestion on it.

30.08.2017 / 11:33

How to know the version of the user's operating system using Javascript? Extract Free Text Field Dates

score 1 · Accepted Answer

If this GetImage() function is only used to start 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>