如何根据用户输入使用 JavaScript 启动字幕？

发布于 2024-08-25 09:05:56 字数 1063 浏览 16 评论 0原文

当用户将他们的名字放入文本框中然后单击按钮时，我尝试使用 JavaScript 来启动选取框。我已经有了一个关于如何做到这一点的想法，但我的脚本从未完全起作用。任何帮助表示赞赏！

这是我到目前为止所拥有的：

<!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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Oo萌小芽oO 2024-09-01 09:05:57

您的 JavaScript 有一些问题。

您正在将未定义的变量 namebox 传递给 getElementById。您需要将其放在引号中（'namebox'）。
您需要根据空字符串检查 text 的值，而不是 null。
您需要在您创建的元素中使用输入的值（text.value 而不是 text）。

以下是经过这些修复后您的代码的样子：

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!!!");
  }
}

其他一些一般建议：

不要使用 document.write。相反，使用 DOM 方法创建一个新元素并将其插入到 DOM 中。
使用不引人注目的 JavaScript。在文档加载后附加您的行为，而不是使用内联事件处理程序。
使用 === 和 !== 作为条件以避免类型强制并确保您得到您认为的结果。
永远、永远不要使用marquee。

Your JavaScript has a few problems.

You are passing an undefined variable namebox to getElementById. You need to put this in quotes ('namebox').
You need to check the value of text against the empty string, not null.
You need to use the value of the input (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:

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.

回复收藏 0 原文

俏︾媚 2024-09-01 09:05:57

var text = document.getElementById(namebox).value;

var text = document.getElementById(namebox).value;

回复收藏 0 原文

小ぇ时光︴ 2024-09-01 09:05:57

您可能不想为此使用 document.write - 使用 document.createElement('marquee') 创建元素，然后将其添加到正文页面的。您可以在返回的元素上设置方向等属性，并将其 innerHTML 设置为您想要在选取框中显示的文本。

（PS字幕？真的吗？）

回复收藏 0 原文

一腔孤↑勇 2024-09-01 09:05:57

使用两个 html：第二个 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>

通过 iframe 适合下一个 html 代码

<html>
    <head>
    <title>TLDR-Text complete 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>

关注 https://eniefiok.blogspot.com

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 complete 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.com

回复收藏 0 原文

~没有更多了~