admin管理员组文章数量:1335103
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" ".dtd">
<html xmlns="">
<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>
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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>
- What does "never fully works" mean? – Ben Zotto Commented Mar 18, 2010 at 1:25
- Never fully works means that it either spits out an alert message saying "Enter your username first!" or it ahows a marquee that says "Hello null!". – Adam P Commented Mar 18, 2010 at 1:31
4 Answers
Reset to default 4Your JavaScript has a few problems.
- You are passing an undefined variable
nameboxtogetElementById. You need to put this in quotes ('namebox'). - You need to check the value of
textagainst the empty string, notnull. - You need to use the value of the input (
text.valueas opposed to justtext) 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:
- Don't use
document.write. Instead, use DOM methods to create a new element and insert it into the DOM. - Use unobtrusive JavaScript. Attach your behavior after the document loads instead of using inline event handlers.
- Use
===and!==for conditions to avoid type coercion and to ensure you're getting the result you think you are. - Never, ever use
marquee.
var text = document.getElementById(namebox).value;
You probably don't want to use document.write for this-- use document.createElement('marquee') to create the element, and then add it to the body of the page. You can set attributes like direction on the element you get back, and set its innerHTML to the text you want in the marquee.
(P.S. Marquee? Really?)
use two html: one box in rather plain second html
<html>
<head>
<title></title>
<script type="text/javascript">
function StartMarquee() {
var text = document.getElementById('namebox');
if (text.value !== '') {
document.write("<marquee behavior='scroll' direction='left'>Hello " + text.value + "!/marquee>");
}
else {
alert("Enter your text first!!!");
}
}
</script>
</head>
<body>
<table style="margin:0px auto 0px auto;">
<tr><td>your iframe embedded html must be the same as your device browser boxxed-html url thus requiring two html files!</td>
<td><input type="text" id="namebox"/></td>
<td><input type="button" value="Enter" onclick="StartMarquee()"/></td></tr>
<style> html { background-color: green; text-align: center; color: white; font-family: Arial; }
</style>
</table>
<style> table { background-color: green; text-align: center; color: white; font-family: Arial; }
</style>
</body>
<style> body { background-color: green; text-align: center; color: white; font-family: Arial; }
</style>
</html>
<style> html { background-color: green; text-align: center; color: white; font-family: Arial; }
</style>fits into next html code by iframe
<html>
<head>
<title>TLDR-Text plete in marquee</title>
<style> body { background-color: green; text-align: center; color: white; font-family: Arial; }
</style>
</head>
<body>
<h1>Post Belowne
</h1>
<iframe src="file:///C:/Users/Our%20Home/Documents/Purposting_boxtag.html" name="targetframe" allowTransparency="true" scrolling="yes" frameborder="2" >
<style> body { background-color: green; text-align: center; color: white; font-family: Arial; }
</style>
</iframe>
<marquee>
______________________________________________________________ </marquee>
</body>
</html>follow https://eniefiok.blogspot.
本文标签： htmlHow to start a marquee with JavaScript based on user inputStack Overflow
版权声明：本文标题：html - How to start a marquee with JavaScript based on user input? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742382987a2464465.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论