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

11 浏览
0 Comments

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

我对HTML和JavaScript都很陌生。现在我正在尝试构建一个简单的程序,通过命令行从用户那里获取输入,并将其打印在大的控制台窗口上。现在,当我插入一个简单的文本时,它没有打印任何内容到框中。我是否需要使用特殊的对象?

这是我的代码:



logo

Menu

这是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;
  }

这是命令行和窗口的样子:

[图片链接](https://i.stack.imgur.com/9Z458.png)

0
0 Comments

问题的出现原因是代码中使用了错误的语法来获取名为"command_line"的元素,并尝试将其值设置为tmp。正确的语法应该是使用getElementsByName方法返回的HTMLCollection中的第一个元素,并将其值设置为tmp。

解决方法是将代码中的错误语法改为正确语法,即将"document.getElementsByName('command_line').value = tmp;"改为"document.getElementsByName('command_line')[0].value = tmp;"。这样就可以正确地获取名为"command_line"的元素,并将其值设置为tmp。

在未解决问题之前,还提供了一些阅读材料,包括关于getElementsByName方法的文档链接。

最后,还指出尽管代码已经进行了修改,但仍然没有在窗口中看到任何内容。

0
0 Comments

问题是你从输入字段中获取值,并再次将相同的值设置为它,这就是为什么你看不到任何变化/影响的原因。

解决方法如下:

使用JavaScript和HTML创建一个控制台,类似于IRC中的控制台。首先,在HTML中创建一个输入字段和一个用于显示消息的div元素。

<input type="text" id="inputField">
<div id="messageContainer"></div>

然后,使用JavaScript获取输入字段的值,并将其添加到消息容器中。

// 获取输入字段和消息容器的引用
var inputField = document.getElementById("inputField");
var messageContainer = document.getElementById("messageContainer");
// 监听输入字段的键盘按键事件
inputField.addEventListener("keydown", function(event) {
  // 检查是否按下回车键
  if (event.keyCode === 13) {
    // 阻止默认行为(防止页面重新加载)
    event.preventDefault();
    
    // 获取输入字段的值
    var message = inputField.value;
    
    // 创建一个新的div元素来显示消息
    var newMessage = document.createElement("div");
    newMessage.textContent = message;
    
    // 将新的div元素添加到消息容器中
    messageContainer.appendChild(newMessage);
    
    // 清空输入字段的值
    inputField.value = "";
  }
});

现在,当用户在输入字段中按下回车键时,它们输入的消息将显示在消息容器中。这样,就创建了一个类似于IRC中的控制台。

0
0 Comments

在这个问题中,出现了以下原因和解决方法:

出现的原因:

1. 使用了错误的方法`getElementsByName`,应该使用`getElementById`。

2. 建议不要使用表单,而是将输入框放在div的"root"中。

3. 文本输入框没有`onclick`事件,或者至少它不会按照你的预期工作。

4. 添加一个按钮类型的输入框,通过`onclick="blabla();"`来执行代码。

5. 建议将脚本放在页面末尾,因为它涉及到DOM操作,而你没有使用jQuery。

6. 在控制台的`

`中的`

`元素上添加一个id。

解决方法:


  

Menu

新增的脚本:


可以通过以下链接查看JFiddle示例以验证其工作:

https://jsfiddle.net/bLehLrum/

JavaScript中有`DOMContentLoaded`事件,它类似于jQuery的`ready`函数。

0