I'm trying to get a typewrite effect for a phrase (line 13), but when I run the code, it's not appearing. The code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link href="images/mouth.png" rel="shortcut icon">
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<script>
var i= 0;
var text= 'Please leave a message after the beep. If you are finished recording, hang up, or press 1 for more options.';
var speed = 50;
function typeWriter() {
if (i < txt.length {
document.getElementById("typing").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
</script>
</head>
<body>
<div class="topnav">
<a href="index.html">Home</a>
<a href="aboutme.html">About Me</a>
<a class="active" href="contact.html">Contact</a>
</div>
<div class="row" onload="typeWriter();">
<div class="column equal">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdx7Wq9HrjElE6ExYwBLDgAittD0H73kQLvBeIOk7PgeQKljg/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<div class="column equal" onload="typeWriter();">
<!-- empty... for now -->
</div>
</div>
</html>It doesn't work when I put the onload in the body declaration either.
My friend, kindly check your code/syntax when you write . in you code there are many syntax error for example :" variable 'txt'","div id 'typing' is not there”. Some like more error.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link href="images/mouth.png" rel="shortcut icon">
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="topnav">
<a href="index.html">Home</a>
<a href="aboutme.html">About Me</a>
<a class="active" href="contact.html">Contact</a>
</div>
<div >
here you effect Ꮚˊ•⌔•ˋᏊ
// you was not add the id 'typing'
<p id="typing"></p>
</div>
<div class="row" id="googleForm">
<div class="column equal">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdx7Wq9HrjElE6ExYwBLDgAittD0H73kQLvBeIOk7PgeQKljg/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<div class="column equal" onload=typeWriter()>
<!-- empty... for now -->
</div>
</div>
<script>
var i= 0;
var text= 'Please leave a message after the beep. If you are finished recording, hang up, or press 1 for more options.';
var speed = 50;
const googleForm = document.getElementById("googleForm");
function typeWriter() {
if (i < text.length ){
document.getElementById("typing").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
googleForm.onload = typeWriter();
</script>
</body>
</html>You can try use in javascript: Its a good practice separate javascript of html Also you might want to check Javascript console for errors