Помощь в изменении кода 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. Мне кажется, она сильно облегчит мне задачу :) |
input.value = ''; // очищение текущего значения инпута el.innerHTML += 'новая строка' + '<br>'; // добавление новой строки |
Спасибо большое. Но не могли бы вы мне подсказать, куда именно эти куски кода вставлять?
|
Проснулся - разобрался. Дело было в исходном коде. На сайт я его предоставил несколько изменив.
А вот насчет проблемы в 100 и более команд, может ответить мне кто нибудь? Неужели для каждой команды нужно писать весь этот код, или можно пойти другим путем? |
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 сообществе принято с заглавных букв писать только конструкторы. |
Все, разобрался! Спасибо большое вам! Вы мне очень помогли! Возможно будут еще вопросы от меня, но я надеюсь их исправить сам. Если же нет - отпишусь тут.
|
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) |
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>
|
<!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>
|
| Часовой пояс GMT +3, время: 20:18. |