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

ct2axkht 于 2023-03-16 发布在 Java

关注(0)|答案(4)|浏览(117)

我正在尝试使用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>

Html

来源：https://stackoverflow.com/questions/2467049/how-to-start-a-marquee-with-javascript-based-on-user-input

4条答案

按热度按时间

nfs0ujit1#

您的JavaScript有一些问题。
1.您正在将一个未定义的变量namebox传递给getElementById。您需要将其放在引号中（'namebox'）。
1.您需要根据空字符串检查text的值，而不是null。
1.您需要在所创建的元素中使用输入的值（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!!!");
  }
}

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

赞(0）回复(0）举报 2023-03-16

iq3niunx2#

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

赞(0）回复(0）举报 2023-03-16

brjng4g33#

您可能不想为此使用document.write--使用document.createElement('marquee')创建元素，然后将其添加到页面的正文中，您可以在返回的元素上设置direction等属性，并将其innerHTML设置为字幕中所需的文本。
(P.S.大帐篷？真的吗？）

赞(0）回复(0）举报 2023-03-16

hfsqlsce4#

使用两个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

赞(0）回复(0）举报 2023-03-16

我来回答

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

4条答案

相关问题

热门标签

最新问答