How to create a console like in IRC in JavaScript

Question

I am new all around HTML and JavaScript. Now I am trying to build a simple program that get input from the command line by the user and print it on the big console window. Now when I insert a simple text it does not print nothing into the box. Is there a special object should I use?

this is my code:

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

this is the 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;
  }

this is how the command line and the window looks like:

Does the console show any errors? Has the `DOM` loaded correctly before you start manipulating it? — Script47, Jan 21 '16 at 10:02
Why do you want to reassign the same value for `command_line` ? Use [`document.getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) to get an element by id — Hacketo, Jan 21 '16 at 10:09

score 1 · Accepted Answer · answered Jan 21 '16 at 13:00

1.- For this case i think you should be using getElementById instead of getElementsByName.

2.- I'd recommend not using a form, but instead have the input in the div's "root".

3.- A text input doesnt have a onclick (or at least it doesn't do what you want it to do)

4.- Add a button type input that executes the code through onclick="blabla();"

5.- i'd recommend putting your script at the end of the page since it works with the DOM and you're not using JQuery.

6.- add an id to the <p> element inside of the console <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.- new script:

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

Here's a JFiddle so you can see it works: https://jsfiddle.net/bLehLrum/

There is [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) for JavaScript which is [similar](http://stackoverflow.com/questions/11523359/is-domcontentloaded-event-exactly-the-same-as-jquerys-ready-function) to jQuery `ready`. — Script47, Jan 21 '16 at 15:05

Script47 · Answer 2 · 2016-01-21T10:17:10.277

0

The function you are using returns an HTMLCollection, you need to the following:

Change,

document.getElementsByName('command_line').value = tmp;

To

document.getElementsByName('command_line')[0].value = tmp;

This gets the first element in the array, notice how there is an s at the end of getElements which suggests plural. This should help you in the future.

Reading Material

getElementsByName

edited Jan 21 '16 at 10:17

answered Jan 21 '16 at 10:03

Script47

14,230
4
45
66

still i dont see nothing in the window – Matan Tubul Jan 21 '16 at 10:06

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

Exdending Script47 answer, The problem is you are taking the value from input field and setting the same value again to it, That's why you are seeing any change/affect.

edited May 23 '17 at 12:32

Community

1
1

answered Jan 21 '16 at 10:20

ozil

6,930
9
33
56

Hacketo · Answer 4 · 2016-01-21T11:42:06.343

0

If by the box you mean the console, you should change your function with this

function showVal(){
    // get the value of the input
    var tmp = document.getElementById('commandline').value;

    // add to the innerHTML of the console the tmp value
    document.getElementById('console').innerHTML += "<p>"+tmp+"</p>";
}

document.getElementById

Your code try to reassign the value of command_line with the same value. document.lineform.command_line.value could be the same as document.getElementsByName('command_line')[0]

edited Jan 21 '16 at 11:42

answered Jan 21 '16 at 10:21

Hacketo

4,978
4
19
34

still the same. look at the image that i uploaded – Matan Tubul Jan 21 '16 at 11:27

How to create a console like in IRC in JavaScript

4 Answers4