CODEWITHSUNDEEP
javascripthtmlimage
Digital Farmer
Digital Farmer

Reputation: 2107

Automatically updating images every 0.5 seconds is not happening

The images that appear when HTML opens is this:

enter image description here

The images that appear when script refreshIt() every 0.5 seconds activated is this:

enter image description here

But unfortunately the HTML keeps showing the first image, demonstrating that the script is not being activated.
What do I need to do to resolve this issue?

Full Script to test:

<html>
    <head>
        <style>
        {
            box-sizing: border-box;
        }
        .column {
            float: left;
        }
        .left {
            width: 360;
        }
        .middle {
            width: 360;
        }
        .right {
            width: 360;
        }
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
        </style>
        <script language="JavaScript">
        function refreshIt() {
            if (!document.images) return;
            document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567";
            document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344";
            document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972";
            setTimeout(refreshIt,500); // refresh every 0.5 secs
        }
        </script>
    </head>
    <body>
        <div class="row">
            <div class="column left">
                <form action="" method="post" id="url-setter">
                    <input type="text" name="url" id="url" />
                    <button type="submit" name="submit">Radar 1</button>
                </form>
                <iframe id="the-frame" width="347" height="282" src=""></iframe>
                <script type="text/javascript">
                    (function () {
                        "use strict";
                        var url_setter = document.getElementById('url-setter'), url = document.getElementById('url'), the_iframe = document.getElementById('the-frame');
                        url_setter.onsubmit = function (event) {
                            event.preventDefault();
                            the_iframe.src = url.value;
                        };
                    }());
                </script>
                <form method="post" target="imgChart1">
                    <input type="submit" value="Chart 1" />
                    <input type="text" id="ChartBar1" name="ChartBar1" style="width: 286px;"><br>
                </form>
                <img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 1">
            </div>
            <div class="column middle">
                <form action="" method="post" id="url-setter2">
                    <input type="text" name="url2" id="url2" />
                    <button type="submit" name="submit">Radar 2</button>
                </form>
                <iframe id="the-frame2" width="347" height="282" src=""></iframe>
                <script type="text/javascript">
                    (function () {
                        "use strict";
                        var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
                        url_setter.onsubmit = function (event) {
                            event.preventDefault();
                            the_iframe.src = url2.value;
                        };
                    }());
                </script>
                <form method="post" target="imgChart2">
                    <input type="submit" value="Chart 2" />
                    <input type="text" id="ChartBar2" name="ChartBar2" style="width: 286px;"><br>
                </form>
                <img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 2">
            </div>
            <div class="column right">
                <form action="" method="post" id="url-setter3">
                    <input type="text" name="url3" id="url3" />
                    <button type="submit" name="submit">Radar 3</button>
                </form>
                <iframe id="the-frame3" width="347" height="282" src=""></iframe>
                <script type="text/javascript">
                    (function () {
                        "use strict";
                        var url_setter = document.getElementById('url-setter3'), url = document.getElementById('url3'), the_iframe = document.getElementById('the-frame3');
                        url_setter.onsubmit = function (event) {
                            event.preventDefault();
                            the_iframe.src = url3.value;
                        };
                    }());
                </script>
                <form method="post" target="imgChart3">
                    <input type="submit" value="Chart 3" />
                    <input type="text" id="ChartBar3" name="ChartBar3" style="width: 286px;"><br>
                </form>
                <img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 3">
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 91

Answers (1)

Kinglish
Kinglish

Reputation: 23654

What you're looking for is setInterval() which will run continuously until it is canceled with clearInterval(). Rather than body onload, use the window.addEventListener method. It helps separate logic from presentation and is best practices.

let intervalID
window.addEventListener('DOMContentLoaded', () => {
  intervalID = setInterval(refreshIt, 500); // refresh every 0.5 secs
})

function refreshIt() {
  if (!document.images) return;
  // if want to stop the interval from repeating
  // if (!document.images)  clearInterval(intervalID)
  document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567";
  document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344";
  document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972";
}

Upvotes: 1

Related Questions