我对 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/