I am trying to use JavaScript to start a marquee when a user puts their name into a textbox and then clicks a button. I've got an idea as to how to do it, but my script never fully works. Any help is appreciated!
Here's what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function StartMarquee() {
var text = document.getElementById(namebox);
if (text != null) {
document.write("<marquee behavior='scroll' direction='right'>Hello " + text + "!</marquee>");
}
else {
alert("Enter your name first!!!");
}
}
</script>
</head>
<body>
<table style="margin:0px auto 0px auto;">
<tr><td>Enter your name!</td>
<td><input type="text" id="namebox"/></td>
<td><input type="button" value="Enter" onclick="StartMarquee()"/></td></tr>
</table>
</body>
</html>
Your JavaScript has a few problems.
namebox
to getElementById
. You need to put this in quotes ('namebox'
).text
against the empty string, not null
.text.value
as opposed to just text
) in the element you're creating.Here is what your code would look like with these fixes:
function StartMarquee() {
var text = document.getElementById('namebox');
if (text.value !== '') {
document.write("<marquee behavior='scroll' direction='right'>Hello " + text.value + "!</marquee>");
}
else {
alert("Enter your name first!!!");
}
}
Some other general suggestions:
document.write
. Instead, use DOM methods to create a new element and insert it into the DOM.===
and !==
for conditions to avoid type coercion and to ensure you're getting the result you think you are.marquee
.