javascript - 如何在 JavaScript 中创建类似 IRC 的控制台-6ren

javascript - 如何在 JavaScript 中创建类似 IRC 的控制台

转载作者：行者123 更新时间：2023-12-03 07:53:14

我对 HTML 和 JavaScript 都是新手。现在我正在尝试构建一个简单的程序，该程序从用户的命令行获取输入并将其打印在大控制台窗口上。现在，当我插入简单的文本时，它不会在框中打印任何内容。我应该使用特殊的对象吗？

这是我的代码:

</head>

<body>
<img src="img/Mellanox_logo.jpg" alt="logo" align="middle">
<h1>Menu</h1>
<div id="container1" >
    <div id="console" >
        <p>
            <script>
                function showVal(){
                    var tmp = document.lineform.command_line.value;
                    document.getElementsByName('command_line').value = tmp;
                }
            </script>

        </p>
    </div>
    <div >
        <form id="form1" name="lineform"  >
            <input id="commandline"  type="text" name="command_line" placeholder="Command line" onclick="showVal()"   >
        </form>
    </div>
</div>

</body>
</html>

这是CSS:

    h1{
    color: black;
    text-align: left;
}
p{
    color: black;
    text-align: left;
    font-size: 20px;
}
#container1{
    width:1300px ;
}
#form1{
    width:1300px ;
}
#console{
    border:5px solid dodgerblue;
    background-color: white;
    height: 650px ;
    padding-left: 5px;
    margin-bottom: 5px;
    position: relative;
    width: inherit;
}
  #commandline{
      width: inherit;
      border: 5px solid dodgerblue;
      height: 30px;
      padding-left: 5px;
      font-size: 18px;
      position: absolute;
  }

命令行和窗口如下所示:

最佳答案

1.- 对于这种情况，我认为您应该使用 getElementById 而不是 getElementsByName。

2.- 我建议不要使用表单，而是将输入放在 div 的“根”中。

3.- 文本输入没有 onclick(或者至少它没有执行您希望它执行的操作)

4.- 添加按钮类型输入，通过 onclick="blabla();" 执行代码

5.- 我建议将脚本放在页面末尾，因为它与 DOM 一起使用，并且您没有使用 JQuery。

6.- 将 id 添加到 <p>控制台内的元素 <div>

<body>
  <h1>Menu</h1>
  <div id="container1">
    <div id="console">
      <p id="console_content">

      </p>
    </div>
    <div>
      <input id="commandline" type="text" name="command_line" placeholder="Command line">
      <input id="commandButton" type="button" name="command_button" value="confirm" onclick="showVal();">
    </div>
  </div>

</body>

7.- 新脚本:

<script>
  function showVal() {
    var tmp = document.getElementById("commandline").value;
    document.getElementById('console_content').innerHTML += (tmp + "<br/>");
  }
</script>

这是一个 JFiddle，您可以看到它的工作原理: https://jsfiddle.net/bLehLrum/

关于javascript - 如何在 JavaScript 中创建类似 IRC 的控制台，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34920554/