Помощь в изменении кода javascript

[same4]

Здравствуйте. Я только-только начинаю изучать javascript, в основном работаю с html/css , но дошел до того, что без javascript мне не обойтись.

У меня есть код, отвечающий за вывод информации в

<input type='text'>

var main_input = document.getElementById('input');
var main_output = document.getElementById('output');

function EnterCommand(){
    if (main_input.value == 'test'){
     SendMessage();
        return;
    }
  
    main_output.innerHTML = 'Команда не существует';
}
function SendMessage(){
    main_output.innerHTML = 'Просто тест';
}

Как вы уже поняли, скрипт выводит сообщение о написанной пользователем команды. Если же такой команды нет, то выполняется команда:

function SendMessage(){
    main_output.innerHTML = 'Просто тест';

Но в этом скрипте мне нужно кое-что добавить, а именно:

При отправки команды, поле

<input type='text'>

становилось пустым. Сейчас же оно хранит команду, введенную пользователем.

Еще бы хотелось переносить на новую строку каждую команду. То есть сейчас, когда пользователь ввел новую команду, то предыдущая удаляется, а хотелось бы, чтобы прошлая команда сохранялась, а следующая писалась уже на новой строке. В html за это отвечает тэг <br>, но в javascript я ньюби, поэтому не знаю как все это реализовывается.

P.S Команд будет не две и не три, их будет сотни, неужели нужно писать для каждой команды свой кусок кода или можно обойтись какой нибудь другой конструкцией? К примеру - switch. Но честно, я не знаю как перевести мой javascript код в конструкцию switch. Мне кажется, она сильно облегчит мне задачу

[WorM32]

input.value = ''; // очищение текущего значения инпута
el.innerHTML += 'новая строка' + '<br>'; // добавление новой строки

[same4]

Спасибо большое. Но не могли бы вы мне подсказать, куда именно эти куски кода вставлять?

[same4]

Проснулся - разобрался. Дело было в исходном коде. На сайт я его предоставил несколько изменив.

А вот насчет проблемы в 100 и более команд, может ответить мне кто нибудь? Неужели для каждой команды нужно писать весь этот код, или можно пойти другим путем?

[Aetae]

WorM32, вы все достали с такими советами:

el.innerHTML += 'новая строка' + '<br>';

Нельзя так делать, нельзя! foo += bar - это foo = foo + bar, перезапись всего содержимого.

same4,
Если я правильно понял, то делается то что вам надо примерно так:

<style>
.warning{color: red}
#main-output p{margin:0; padding:0}
</style>
<input type='text' id="main-input"><input type='button' id="main-button" value="go">
<div id="main-output"></div>

<script>
var input = document.getElementById('main-input'),
    button = document.getElementById('main-button'),
    output = document.getElementById('main-output');

function enterCommand(){
  if (input.value in commandList) commandList[input.value]();
  else out('Команда не существует', 'warning');
}

button.onclick = enterCommand;
  
var commandList = {
  test: function(){
    out('Просто тест')
  },
  test2: function(){
    out('Просто тест2')
  }
};

function out(msg, cls){
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(msg));
  
  if(cls) p.className = cls;
  output.appendChild(p)
}
</script>

P.S. В js сообществе принято с заглавных букв писать только конструкторы.

[same4]

Все, разобрался! Спасибо большое вам! Вы мне очень помогли! Возможно будут еще вопросы от меня, но я надеюсь их исправить сам. Если же нет - отпишусь тут.

[same4]

Aetae,

У меня тут одна проблемка появилась..

При

<div id="main-output"></div>

Все выходит супер, но проблема в том, что мне нужно выводить результат в

<textarea> </textarea>

Естественно, чтобы появлялась полоса прокрутки, если введено много команд.

При использовании

<div id="main-output"></div>

после отправки порядка 10 команд, все это выходит за рамки положенного. Поэтому прошу помочь с отправкой результатов в

textarea

P.S И еще.. В моем изначальном коде, при нажатии энтер команда автоматически отправлялась в форму. Пользовался командой

onclick = 'EnterCommand(); return false;'

Написана она была в HTML коде. Сейчас же она не работает. (Пытался подставлять в разные места return false; - толку 0)

[WorM32]

Aetae,
И? Чем перезапись небольшого кусочка так плоха? Прошу аргументированный ответ с тестами производительности

[Aetae]

WorM32, Так просто делать не надо и всё. Нет никакого преимущества в том чтобы сделать так, зато потенциальных граблей и трудновылавливаемых багов - завались.

same4, Какие проблемы задать высоту?

<style>
.warning{color: red}
#main-output p{margin:0; padding:0}
#main-output {overflow:auto; height:100px;  direction:rtl; text-align:left}
</style>
<input type='text' id="main-input"><input type='button' id="main-button" value="go">
<div id="main-output"></div>
 
<script>
var input = document.getElementById('main-input'),
    button = document.getElementById('main-button'),
    output = document.getElementById('main-output');
 
function enterCommand(){
  if (input.value in commandList) commandList[input.value]();
  else out('Команда не существует', 'warning');
}
 
button.onclick = enterCommand;
   
var commandList = {
  test: function(){
    out('Просто тест')
  },
  test2: function(){
    out('Просто тест2')
  }
};
 
function out(msg, cls){
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(msg));
   
  if(cls) p.className = cls;
  output.appendChild(p)
}
</script>

[MallSerg]

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
	<style>
b {marginLeft:2pt;}
	</style>
</head>
<body>
<div id="first">test 1 </div>
<div id="second">test 2</div>
<script type="text/javascript">
   var f = document.getElementById("first");
   var s = document.getElementById("second");   var r;
 
var time1 = new Date().getTime();  
  for (i = 0 ; i < 1000; ++i){
	f.innerHTML += "<b>A da</b>";
  }
var time2 = new Date().getTime();
  
var time3 = new Date().getTime();  
  for (i = 0 ; i < 1000; ++i){
	r = document.createElement ("b");
	r.innerHTML = "A da";
	s.appendChild (r);
  }
var time4 = new Date().getTime();    

alert ("(innerHTML +=)милисек = " + (time2 - time1) );
alert ("(appendChild)милисек = " + (time4 - time3) );
alert ("коффицент" + ((time2 - time1) / (time4 - time3)) );
</script>
</body>
</html>