I wanna preface this by saying I'm very new at this and learning as I go so there may be several mistakes in this and I'm open to all helpful feedback!
I created this bit of animated text forked from a codepen pen using a combo of html/css/js and it's running exactly as it should be, except a little while after the animated text finishes loading, it adds a portion of my nested js as visible html text. I think it has something to do with a rogue unclosed ">" somewhere because the portion of js that it's mistakenly displaying exists between two unrelated ">" and "<". Can anyone explain why this is happening? TIA! full code is as follows:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<style type="text/css">
.var-highlight{
color: #07573e; font-style: italic;
}
.string-highlight{
color: rgba(253, 149, 90, 0.8);
}
#typewriter{
font-size: 0.7em;
margin: 0;
font-family: "Courier New";
&:after{
animation: blink 500ms linear infinite alternate;
}
}
@-webkit-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@-moz-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
</style>
</head>
<body>
<pre id="typewriter">
</span> hmmm
seems I've gotten myself all turned around...
could've sworn the road was back that way...
I guess uncertainty seems appropriate
for matters of this world
only thing I can really be certain of these days
is that</span> <span >I'm so-and-so and I exist</span>
anyhow, looking back is a bad habit, y'know
while we're both here,
might as well take a look around...
...well?
you gonna do somethin'?
or are you just gonna stand there and bleed?<span/><type>
</body>
<script type="text/javascript">
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 105,
tempTypeSpeed = 0;
var linePause = 1500;
var type = function() {
if (writingTag === true) {
tag = HTML[cursorPosition];
}
if (HTML[cursorPosition] === "<") {
tempTypeSpeed = 0;
if (tagOpen) {
tagOpen = false;
writingTag = true;
} else {
tag = "";
tagOpen = true;
writingTag = true;
tag = HTML[cursorPosition];
}
}
if (!writingTag && tagOpen) {
tag.innerHTML = HTML[cursorPosition];
}
if (!writingTag && !tagOpen) {
if (HTML[cursorPosition] === " ") {
tempTypeSpeed = 0;
}
else if (HTML[cursorPosition] === "\n")
{
console.log("newline detected");
tempTypeSpeed = linePause;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) 50;
}
t.innerHTML = HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) 50;
writingTag = false;
if (tagOpen) {
var newSpan = document.createElement("span");
t.appendChild(newSpan);
newSpan.innerHTML = tag;
tag = newSpan.firstChild;
}
}
cursorPosition = 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
}
};
return {
type: type
};
}
var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();
</script>
</html>CodePudding user response：
There are a few small errors here, most notably a missing </pre> tag (which is causing the script issue)
</style>
</head>
<body>
<pre id="typewriter"> <--------- this opening tag is missing a closing tag
</span> hmmm
seems I've gotten myself all turned around...
could've sworn the road was back that way...
CodePudding user response：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<style type="text/css">
.var-highlight{
color: #07573e; font-style: italic;
}
.string-highlight{
color: rgba(253, 149, 90, 0.8);
}
#typewriter{
font-size: 0.7em;
margin: 0;
font-family: "Courier New";
&:after{
animation: blink 500ms linear infinite alternate;
}
}
@-webkit-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@-moz-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
</style>
</head>
<body>
<pre id="typewriter">
<span> hmmm
seems I've gotten myself all turned around...
could've sworn the road was back that way...
I guess uncertainty seems appropriate
for matters of this world
only thing I can really be certain of these days
is that</span> <span >I'm so-and-so and I exist</span>
<span>
anyhow, looking back is a bad habit, y'know
while we're both here,
might as well take a look around...
...well?
you gonna do somethin'?
or are you just gonna stand there and bleed?</span></pre>
</body>
<script type="text/javascript">
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 105,
tempTypeSpeed = 0;
var linePause = 1500;
var type = function() {
if (writingTag === true) {
tag = HTML[cursorPosition];
}
if (HTML[cursorPosition] === "<") {
tempTypeSpeed = 0;
if (tagOpen) {
tagOpen = false;
writingTag = true;
} else {
tag = "";
tagOpen = true;
writingTag = true;
tag = HTML[cursorPosition];
}
}
if (!writingTag && tagOpen) {
tag.innerHTML = HTML[cursorPosition];
}
if (!writingTag && !tagOpen) {
if (HTML[cursorPosition] === " ") {
tempTypeSpeed = 0;
}
else if (HTML[cursorPosition] === "\n")
{
console.log("newline detected");
tempTypeSpeed = linePause;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) 0;
}
t.innerHTML = HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) 0;
writingTag = false;
if (tagOpen) {
var newSpan = document.createElement("span");
t.appendChild(newSpan);
newSpan.innerHTML = tag;
tag = newSpan.firstChild;
}
}
cursorPosition = 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
}
};
return {
type: type
};
}
var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();
</script>
</html>