Search code examples
javascripthtmlimagesrc

Set image links to be refreshed every 0.5 seconds from the values defined in the text bars

I would like AAAAAAAAAA, BBBBBBBBBB and CCCCCCCCCC to be defined from the links that I put in the text bars named chart1, chart2 and chart3, what is the best and simplest way to define it this way?

This project is for learning and I'm doing it through Notepad++, for private use, without the need to save data for future use. Every time I open the HTML, the links I'll put in the bars will be different.

<html>

<head>
<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   document.images['Gráfico1'].src = 'AAAAAAAAAA';
   document.images['Gráfico2'].src = 'BBBBBBBBBB';
   document.images['Gráfico3'].src = 'CCCCCCCCCC';
   setTimeout(refreshIt,500); // refresh every 0.5 secs
}
//--></script>
</head>

<body onLoad=" setTimeout(refreshIt,500)">

</body>
<input type="text" id="chart1" name="chart1"><br>
<input type="text" id="chart2" name="chart2"><br>
<input type="text" id="chart3" name="chart3"><br>
<p></p>
<iframe src="XXXXXXXXXX" width="350" height="282"></iframe>
<iframe src="YYYYYYYYYY" width="350" height="282"></iframe>
<iframe src="ZZZZZZZZZZ" width="350" height="282"></iframe>
<p></p>
<img src="AAAAAAAAAA" name="Gráfico1">
<img src="BBBBBBBBBB" name="Gráfico2">
<img src="CCCCCCCCCC" name="Gráfico3">

</html>

Script updated from statement made in response (https://stackoverflow.com/a/68355982/11462274)

Solution

  • You are not calling refreshIt properly. You are passing a string instead of a function as a parameter.

    Instead, use:

    <html>

<head>
<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   document.images['Gráfico1'].src = 'AAAAAAAAAA';
   document.images['Gráfico2'].src = 'BBBBBBBBBB';
   document.images['Gráfico3'].src = 'CCCCCCCCCC';
   setTimeout(refreshIt,500); // refresh every 0.5 secs
}
//--></script>
</head>

<body onLoad=" setTimeout(refreshIt,500)">

</body>
<input type="text" id="chart1" name="chart1"><br>
<input type="text" id="chart2" name="chart2"><br>
<input type="text" id="chart3" name="chart3"><br>
<p></p>
<iframe src="XXXXXXXXXX" width="350" height="282"></iframe>
<iframe src="YYYYYYYYYY" width="350" height="282"></iframe>
<iframe src="ZZZZZZZZZZ" width="350" height="282"></iframe>
<p></p>
<img src="AAAAAAAAAA" name="Gráfico1">
<img src="BBBBBBBBBB" name="Gráfico2">
<img src="CCCCCCCCCC" name="Gráfico3">

</html>

    To set the source to the value from the text bars, get the value property of the inputs:

    <html>

<head>
<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   document.images['Gráfico1'].src = chart1.value;
   document.images['Gráfico2'].src = chart2.value;
   document.images['Gráfico3'].src = chart3.value;
   setTimeout(refreshIt,500); // refresh every 0.5 secs
}
//--></script>
</head>

<body onLoad=" setTimeout(refreshIt,500)">

</body>
<input type="text" id="chart1" name="chart1"><br>
<input type="text" id="chart2" name="chart2"><br>
<input type="text" id="chart3" name="chart3"><br>
<p></p>
<iframe src="XXXXXXXXXX" width="350" height="282"></iframe>
<iframe src="YYYYYYYYYY" width="350" height="282"></iframe>
<iframe src="ZZZZZZZZZZ" width="350" height="282"></iframe>
<p></p>
<img src="AAAAAAAAAA" name="Gráfico1">
<img src="BBBBBBBBBB" name="Gráfico2">
<img src="CCCCCCCCCC" name="Gráfico3">

</html>