Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.07.2014, 14:52
Новичок на форуме
Отправить личное сообщение для same4 Посмотреть профиль Найти все сообщения от same4
 
Регистрация: 30.07.2014
Сообщений: 8

Помощь в изменении кода javascript
Здравствуйте. Я только-только начинаю изучать 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. Мне кажется, она сильно облегчит мне задачу
Ответить с цитированием
  #2 (permalink)  
Старый 30.07.2014, 17:22
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

input.value = ''; // очищение текущего значения инпута
el.innerHTML += 'новая строка' + '<br>'; // добавление новой строки
Ответить с цитированием
  #3 (permalink)  
Старый 30.07.2014, 18:10
Новичок на форуме
Отправить личное сообщение для same4 Посмотреть профиль Найти все сообщения от same4
 
Регистрация: 30.07.2014
Сообщений: 8

Спасибо большое. Но не могли бы вы мне подсказать, куда именно эти куски кода вставлять?
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2014, 06:36
Новичок на форуме
Отправить личное сообщение для same4 Посмотреть профиль Найти все сообщения от same4
 
Регистрация: 30.07.2014
Сообщений: 8

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

А вот насчет проблемы в 100 и более команд, может ответить мне кто нибудь? Неужели для каждой команды нужно писать весь этот код, или можно пойти другим путем?
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2014, 07:26
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,474

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 сообществе принято с заглавных букв писать только конструкторы.
__________________
29375, 35

Последний раз редактировалось Aetae, 31.07.2014 в 07:30.
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2014, 07:47
Новичок на форуме
Отправить личное сообщение для same4 Посмотреть профиль Найти все сообщения от same4
 
Регистрация: 30.07.2014
Сообщений: 8

Все, разобрался! Спасибо большое вам! Вы мне очень помогли! Возможно будут еще вопросы от меня, но я надеюсь их исправить сам. Если же нет - отпишусь тут.
Ответить с цитированием
  #7 (permalink)  
Старый 31.07.2014, 08:15
Новичок на форуме
Отправить личное сообщение для same4 Посмотреть профиль Найти все сообщения от same4
 
Регистрация: 30.07.2014
Сообщений: 8

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)
Ответить с цитированием
  #8 (permalink)  
Старый 31.07.2014, 08:52
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Aetae,
И? Чем перезапись небольшого кусочка так плоха? Прошу аргументированный ответ с тестами производительности
Ответить с цитированием
  #9 (permalink)  
Старый 31.07.2014, 09:23
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,474

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>
__________________
29375, 35

Последний раз редактировалось Aetae, 31.07.2014 в 09:30.
Ответить с цитированием
  #10 (permalink)  
Старый 31.07.2014, 09:25
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 945

<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помощь недоламеру в оптимизации кода Cooleraunt Javascript под браузер 4 11.01.2013 13:05
Нужна помощь с javascript Leslie Оффтопик 0 18.12.2012 00:40
JavaScript - нужна помощь (студентке) SunnyGirl7773 Общие вопросы Javascript 11 08.05.2010 15:50
Нужна помощь по JavaScript!!! TehnoMag Общие вопросы Javascript 7 26.08.2009 15:08