Trying to get one line of text to fade into black background

AARRGGHHH · October 6, 2022

When I step through this, it never changes to black. It just stays red.

  <body onload = "hideQuote0();">

		<script>
          
			function hideQuote0()
			{
				document.getElementById("span0").color = "rgb(255,0,0)"; 
				setTimeout(hideQuote1(), 3000); 	
			}
			function hideQuote1()
			{
				document.getElementById("span0").color = "rgb(128,0,0)"; 
				setTimeout(hideQuote2(), 3000); 	
			}
			function hideQuote2()
			{
				 document.getElementById("span0").color = "rgb(0,0,0)"; 
			}
				 
		</script>

		<div id="div0" style.display = "block";> 
			<span id="span0" color: rgb(0,0,0);> QUOTE GOES HERE </span><br><br> 
		</div> 	
    
    	...
    
  </body>

Thank you very much

Edited October 6, 2022 by AARRGGHHH

AARRGGHHH · October 7, 2022

Accomplished what I wanted with CSS Animation:

<style>
	p {text-align: center;} 
		
	#span0 
	{
		animation: animate 8s;
		animation-iteration-count: 1;
	}

	@keyframes animate
    	{
    		from {color: rgb(255,128,64);}
        	to {color: black;}
    	}
		
</style> 

	<div id="div0" style.display = "block";> 
		<span id="span0">QUOTE GOES HERE</span><br><br> 
	</div>

But I am curious as to why I was unable to get it to work using the JavaScript setTimeout() function. If anyone knows, please share the knowledge!

Thank you

Edited October 7, 2022 by AARRGGHHH

dsonesuk · October 7, 2022

If you want to use inline CSS you MUST use STYLE to do so.


          
			function hideQuote0()
			{
				document.getElementById("span0").style.color = "rgb(255,0,0)"; 
				setTimeout(hideQuote1, 3000); 	
			}
			function hideQuote1()
			{
				document.getElementById("span0").style.color = "rgb(0,255,0)"; 
				setTimeout(hideQuote2, 3000); 	
			}
			function hideQuote2()
			{
				 document.getElementById("span0").style.color = "rgb(0,0,0)"; 
			}


<div id="div0" style.display = "block";> 
			<span id="span0" style="font-weight: 900; color: rgb(0,0,0);"> QUOTE GOES HERE </span><br><br> 
		</div>

Edited October 7, 2022 by dsonesuk

AARRGGHHH · October 8, 2022

5 hours ago, dsonesuk said:

If you want to use inline CSS you MUST use STYLE to do so.

I'm fairly certain that I tried that but I'll try it again to see what happens.

Thanks

Sign In

Trying to get one line of text to fade into black background

Recommended Posts

AARRGGHHH

Link to comment

Share on other sites

AARRGGHHH

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

AARRGGHHH

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity