Помощь в изменении кода 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> |
MallSerg,
не-не-не, я никогда бы не стал в цикле использоваться конструкцию с el.innerHTML += 'бла бла бла'; Если на вашем примере, то было бы так: <!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 html = f.innerHTML; var time1 = new Date().getTime(); for (i = 0 ; i < 1000; ++i){ html += "<b>A da</b>"; } f.innerHTML = html; 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> |
WorM32, ты бы не стал. А те, кому ты советы даёшь без пояснений - стали бы. Потому хотябы в ответах новичкам воздержись от этого дерьма.
|
Aetae,
Простите, но пояснения, что "нужно использовать только appendChild и всё, писец!" - я тоже не увидел) Так что в данном случае ваш совет ничем не лучше моего. А вообще нужно уметь пользоваться разными инструментами, в зависимости от конкретной ситуации, но это придет только с опытом. |
WorM32,
Ты лукавишь речь шла про то что « .innerHTML += » это писец а ты переврал и убрал эту конструкцию из своего теста и пытаешься всех обмануть. Не нада так делать. Нужно просто признать что « .innerHTML += » именно в таком сочетании это писец ад и погибель |
MallSerg,
Простите, где это я из своего теста убрал полный ребилд элемента? Ведь именно в этом и был смысл нашего спора с Aetae. Конструкции var html = el.innerHTML; html += '<b>bla</b>'; el.innerHTML = html;и el.innerHTML += '<b>bla</bla>';Являются идентичными! И делают полный ребилд элемента el. Про то что el.innerHTML += 'bla' можно использовать в цикле я нигде не говорил, и у ТСа в описании проблемы тоже не было никаких циклов. Так что не надо фантазировать и подгонять тесты под свои фантазии. |
Aetae,
Спасибо большое, вы сделали мой день. И да, вы может упустили момент, но мне нужно отправлять текст по нажатию на enter, сейчас же страница тупо обновляется. Да, спасибо всем, кто помог мне в решении проблемы. Все ваши ответы послужат мне уроком :) В моем случае, код - Aetae был тем, что мне нужно. |
Цитата:
|
Цитата:
|
Rise,
<!Doctype html> <html> <head> <meta charset="utf-8"> <style> b {marginLeft:2pt;} </style> </head> <body> <div id="first">test 1 <b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b></div> <div id="second">test 2</div> <script type="text/javascript"> var f = document.getElementById("first"); var s = document.getElementById("second"); var r; var html = f.innerHTML; var time1 = new Date().getTime(); for (i = 0 ; i < 1000; ++i){ html += "<b>A da</b>"; } f.innerHTML = html; 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> Еще вопросы? |
Цитата:
Цитата:
|
... не нужно 1000 раз сложить строку
... нужно 1000 раз изменить элемент добавляя новые элементы в конец в случае с innerHTML элемент будет пересоздаваться 1000 раз в случае appendChild .... все все знают но некоторые упираются ... =) |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Да и к тому же у меня и без textarea код работает хорошо с div (спасибо Aetae) |
Цитата:
<div id="first"><a id="ele">Известно</a></div> <form name="frm"> <input type="button" name="b1" value=".innerText +=" /> <input type="button" name="b2" value=".appendChild" /> </form> <script type="text/javascript"> var f = document.getElementById ("first"); document.frm.b1.onclick = function (){ // показывает что все элементы внутни f создаются заного var first = document.getElementById ("ele"); f.innerHTML += "<a> + добавка</a>"; var second = document.getElementById ("ele"); alert ( (first === second) ); } document.frm.b2.onclick = function (){ // ссылка неизменна показывает что все элементы внутни f остались прежними var a = document.createElement('a'); a.innerHTML = "<a> + добавка</a>"; var first = document.getElementById ("ele"); f.appendChild(a); var second = document.getElementById ("ele"); alert ( (first === second) ); } </script> |
Часовой пояс GMT +3, время: 09:56. |