why isnt my javascript displaying the text

skat · #1 (**permalink**) 01-26-2008, 06:51 AM

hi, i have written the following javascript, however when i click the button it wont display the text. can anyone see what the problem is and how to get it working. i am trying to do it so the text is displayed in a sequence.
thanks

<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('displayDiv ').value='2 seconds!'",2000);
var t2=setTimeout("document.getElementById('displayDiv ').value='4 seconds!'",4000);
var t3=setTimeout("document.getElementById('displayDiv ').value='6 seconds!'",6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed text!" onClick="timedText()">
<div id="displayDiv">
</div>
<p>Click on the button above. It will tell you when two, four, and six seconds have passed.</p>
</body>
</html>

BigAlReturns · #2 (**permalink**) 01-27-2008, 04:23 AM

I think the problem is that divs don't have values, they have innerHTML. Try using this instead and it should work, although you may have to play around to get them to not replace each other.

skat · #3 (**permalink**) 01-28-2008, 02:35 PM

hi,
thanks your were right i had to change it to your suggestion it works now,
do you know what i can do to make it so that when i click the button it gets rid of the text 'Click on the button above. It will tell you when two, four, and six seconds have passed' and just displays the sequence 2seconds, 4seconds 6 seconds?
hope that makes sense,

thanks

BigAlReturns · #4 (**permalink**) 01-28-2008, 03:56 PM

If you stick the <p> containing the instructions inside the displayDiv, then it will be replaced by the 2 seconds, 4 seconds etc text when the button is clicked. I think that's what you mean anyway!

skat · #5 (**permalink**) 01-28-2008, 04:08 PM

hi,
i dont really understand where you mean to put that line of text, i have tried placing it in many areas however it still doesnt work. my aim is for the line of text to appear when the page loads and then when the user clicks the button it will disappear and then sequence of 2sec, 4 secs and 6 sec will appear. could you please give me an example?

thank you

BigAlReturns · #6 (**permalink**) 01-28-2008, 06:06 PM

Code:

<html>
<head>
<script type="text/javascript">
function timedText()
{
document.getElementById('displayDiv').innerHTML='';
var t1=setTimeout("document.getElementById('displayDiv').innerHTML='2 seconds!'",2000);
var t2=setTimeout("document.getElementById('displayDiv').innerHTML='4 seconds!'",4000);
var t3=setTimeout("document.getElementById('displayDiv').innerHTML='6 seconds!'",6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed text!" onClick="timedText()">
<div id="displayDiv">
<p>Click on the button above. It will tell you when two, four, and six seconds have passed.</p>
</div>
</body>
</html>

BigAlReturns · #7 (**permalink**) 01-28-2008, 06:11 PM

That works, but I think the code below is a more elegant way to achieve the same effect - obviously alter the amount added to num each time, and the timeout, to achieve what you want exactly.

Code:

<html>
<head>
<script type="text/javascript">
function timedText(num)
{
document.getElementById('displayDiv').innerHTML=num + ' milliseconds!';
num=num+1;
setTimeout('timedText('+num+')',1);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed text!" onClick="timedText(0)">
<div id="displayDiv">
<p>Click on the button above. It will tell you when two, four, and six seconds have passed.</p>
</div>
</body>
</html>