Laurent Laurent - 1 month ago 9
HTML Question

script no longer updating the page

I have the following html page which displays a picture at a random location and updates it every 10 seconds :

<!DOCTYPE html>
<html>
<head>
<title>Domoos | Screen saver screen</title>
<meta http-equiv="refresh" content="10">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_saver.css" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript">
function init() {
var xmin = 0;
var xmax = 890;
var ymin = 0;
var ymax = 430;
var xCoord = Math.floor((Math.random()*xmax)+xmin);
var yCoord = Math.floor((Math.random()*ymax)+ymin);
var xCoordStr = xCoord.toString() + "px";
var yCoordStr = yCoord.toString() + "px";
document.getElementById("randomPlacement").style.left = xCoordStr;
document.getElementById("randomPlacement").style.top = yCoordStr;
}
</script>
</head>
<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p><a href="index.html"><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></a></p>
</div>
</body>
</html>


It works very well. Now, I would like to add two 'div' tags so I could display the date and the time. So, I updated the body tag as follows (the rest of the page remains unchanged) :

<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p><a href="index.html"><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></a></p>
</div>
<div id="date">
<script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
<script type="text/javascript">window.onload = getTime('time');</script>
</div>
</body>


The problem by doing so is that the image is never displayed at a random location. What am I missing and hopefully how can I solve the issue? I have added an extract of the console in Chrome.

Thanks a lot for your help.

enter image description hereenter image description hereenter image description here

Answer

replace

  <div id="date">
    <script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
    <script type="text/javascript">window.onload = getTime('time');</script>
</div>

with

<div id="time">

</div>

then in init()

 function init() {
        var xmin = 0;
        var xmax = 890;
        var ymin = 0;
        var ymax = 430;
        var xCoord = Math.floor((Math.random()*xmax)+xmin);
        var yCoord = Math.floor((Math.random()*ymax)+ymin);
        var xCoordStr = xCoord.toString() + "px";
        var yCoordStr = yCoord.toString() + "px";
        document.getElementById("randomPlacement").style.left = xCoordStr;
        document.getElementById("randomPlacement").style.top = yCoordStr;
        document.getElementById("date").innerhtml=getDate('date');
document.getElementById("time").innerhtml=gettime('time');
    }
Comments