Javascript setTimeout is not working, what am i doing wrong?

StackOverflow https://stackoverflow.com/questions/23530567

  •  17-07-2023
  •  | 
  •  

Question 

<title></title>
<link rel="stylesheet" type="text/css" href="mystyle.css">

<script type="text/javascript">

    function showImage(image) {
        document.getElementById("image").style.visibilty = "visible";
        document.getElementById("image").src = images / GreenLight.jpg;
    }


    function startTimer() {
        var con = confirm("Press a button");
        if (con == true) {
            x = setTimeout(function () { showImage('image') }, 1);
        }
        else {
            x = "You pressed Cancel!";
        }
    }




</script>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1> Page 1</h1>
    </div>
    <div id="menu">
        <ul>
            <li> <a href="default.htm">Home</a>        </li>
            <li class="here"><a href="page1.htm">Page 1</a></li>
            <li><a href="page2.htm">Page 2</a></li>
        </ul>
    </div>
    <div id="content">
        <form id="formpage1" method="post" action="default.htm"></form>

        <button onclick="startTimer()">Click Here</button>
        <div>
            <img id="image" src=images/GreenLight.jpg style="visibility:hidden" />
        </div>
    </div>

    <div id="footer">

    </div>
</div>

</body>
 </html>

I am trying to get an image to display 5 seconds after the "ok" button is clicked on the alert box. I am so confused as to what i am doing wrong.

Was it helpful?

Solution 2

Changed showImage functions as

function showImage(image) {
        document.getElementById(image).style.visibilty = "visible";
        document.getElementById(image).src = "images/GreenLight.jpg";
    }

Your HTMLtag of img should be use quotes:

<img id="image" src="images/GreenLight.jpg" style="visibility:hidden" />

OTHER TIPS

You have to form a legal javascript string in this line to get the .src property assigned as you wanted. So change this:

document.getElementById("image").src = images / GreenLight.jpg;

to this:

document.getElementById("image").src = "images/GreenLight.jpg";

FYI, the error console would probably have been your friend here as this probably would have been a javascript error and would have given you the error and line number.

Your HTML should also use quotes:

<img id="image" src="images/GreenLight.jpg" style="visibility:hidden" />

And, if you want a 5 second delay, then you need to set the time to 5000 milliseconds:

setTimeout(function () { showImage('image') }, 5000);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top