How can I change the font colour of this JavaScript code?
Question
I'm trying to recreate the terminal animation for my web page. I tried changing the colour with a div class but I don't believe it is registering. What would be the best method to achieve this? Thanks a lot.
https://jsfiddle.net/zx5qs2qy/
<html>
<head>
<div class="color">
<script type='text/javascript'>
var index = 0;
var text =
'<span id="color"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, nulla at tempus tristique, nisl leo molestie est, ut vestibulum mauris mauris a odio. Sed at massa vitae ipsum venenatis porta. Integer iaculis pretium tempus. Donec viverra sollicitudin velit non gravida. Phasellus sit amet tortor odio. Vivamus lectus nisl, suscipit porttitor bibendum ut, tristique quis dui. Vestibulum non eros leo. Maecenas tincidunt semper turpis, a tristique purus pretium sit amet. Praesent nec neque tortor.Donec suscipit tristique ante quis molestie. Phasellus ac lacus non felis faucibus dictum vitae ac ipsum. Sed pharetra nulla sodales nulla porta imperdiet. Quisque pretium hendrerit laoreet.</span>';
// Here you can put in the text you want to make it type.
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',100);
// The time taken for each character here is 100ms. You can change it if you want.
}
{
document.getElementById("color").style.color = "red"; // red or #ffffff
}
</script>
</div>
</head>
<body onload='type()'>
<!-- And here, you create the container in which you display the typed text -->
<div id='screen'></div>
</body>
</html>
4 answers
solution1
2 ACCPTED 2016-12-09 00:24:47
Here is an updated fiddle: https://jsfiddle.net/zx5qs2qy/2/
I assume you are just trying to style 'screen', if so use css instead:
<style>
#screen {
color:red
}
</style>
Also, don't wrap script tags in a div, this serves no purpose.
If you really want to update the color using javascript you can do it like so:
function setColor()
{
//use #screen here, no need for the span in the text
document.getElementById('screen').style.color = "red";
}
And now call both functions on your body tag:
<body onload='type();setColor()'>
Fiddle showing this: https://jsfiddle.net/zx5qs2qy/3/
solution2
1 2016-12-09 00:26:10
You're styling the wrong thing. You have a <span> element inside of a string variable, so it's not adding that element to the DOM, it's just displaying that text.
Change this line...
document.getElementById("color").style.color = "red"; // red or #ffffff
to
document.getElementById("screen").style.color = "red"; // red or #ffffff
And remove the <span> elements from your text variable.
solution3
1 2016-12-09 00:33:35
https://jsfiddle.net/zx5qs2qy/4/ You were inserting into #screen, but styling .color. Simple fix!
document.getElementById('insertRed').innerHTML += text.charAt(index);
I changed it to ap tag with the above ID. Cheers
solution4
0 2016-12-09 00:23:20
Is this what you're trying to achieve?
If so, screen is an ID, not a class, so use #screen .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.