Окно смайлов
 

Приветствую знатоков Javascript и надеюсь на вашу помощь! :o

У меня такая вот проблема - хочу с javascript и html спрограммировать окно для чата(showModelessDialog), которое бы в зависимости от выбранной категории выдавало бы мне смайлы, которые потом через onClick я смог выводить в поле ввода текста в чате. Собственно все для этого уже сделано и все работает за исключением одной жуткой детали над которой я ломаю голову уже не одну неделю...
Вобщем, выглядит это примерно так:

из HTML :

<span onClick="selectkat(1);">Приветствие</span><span onClick="selectkat(2);">Прощание</span>

<SCRIPT>
function selectkat(kat){
if(kat=="1"){
var sm = new Array("smile1", "smile2", "smile3");
}
if(kat=="2"){
var sm = new Array("smile4", "smile5", "smile6");
}}

var i=0;
while(i<sm.length) {
        var s = sm[i++];
        document.write('<IMG SRC=chat/smile/'+s+'.gif>');
}
</SCRIPT>

Как мне кажется, при вызове функции selectkat, kat, в зависимости от того 1 это или 2, должно определять переменную sm. Но после нажатия на одну из категорий окно мнгновенно белеет, в тоже время показывая смайлы. Словно весь HTML код пропадает и остаются лишь смайлы на белом фоне, нет ни категорий, ни графики.... :rolleyes:

Кто знает в чем дело, подскажите пожалуйста чего тут не хватает или почему вообще система не работает...

если хочешь пройтись по массиву используй for( var i=0; i<sm.length; i++ ). Оставь while для других случаев

по поводу проблемы: [telepat mode]document.write, после того как страница загрузилась, стирает документ и начинает писать его с нуля[/telepat mode]

p.s. не пользуйся document.write ;-)

x-yuri,
Хотел сказать что в твоем случае лучше использовать innerHTML :)

P.S. А почему следует держать while для других случаев? Мне казалось что он как и инвертированный цикл работает быстрее в js O_o

P.S. А почему следует держать while для других случаев? Мне казалось что он как и инвертированный цикл работает быстрее в js O_o

Дело не в быстродействии. Мне обычно читабельность интересует. В большинстве случаев стоит пользоваться конструкциями (и т..д) в соответствии с их предназначением))). Основное назначение for ( var i= ... ) - пройтись по массиву, for ( var k in ... ) - по ассоциативному массиву, while - чтобы выполнить какие-либо другие действия в цикле, например
Но изначально такой совет в книжке прочитал (там это как-то со словом парадигма связывали), но уже не помню

Да про парадигму то понятно :) в таком случае можно и тернарный оператор ? : тоже посылать куда подальше :) чтобы читабельней было. В общем тут думаю дело привычки и стиля написания кода отдельным индивидумом, ибо например меня в отличие от Вас больше интересует производительность (пусть то будет доля секунды незначительная) чем читабельность :) (да я из разряда тех людей :D )

по поводу тернарного оператора, мне кажется, что так

var TicketExit =   TicketPrice   ? parseFloat(TicketPrice) * TicketCount
                                 : 0;

читабельнее, чем

if (TicketPrice != '0') {
    var TicketExit            = parseFloat(TicketPrice) * TicketCount;
 }
 else {
    var TicketExit            = 0;
 }

я считаю, что тернарный оператор больше подходит для простых случаев присвоения переменной значения, в других случаях - if

а по поводу оптимизации много есть фраз. Тот же Кнут сказал, что "Оптимизация - корень всех зол" или "Время программиста дорого; сократите его, используя машинное время" или это (да и сама статья интересная). И я что-то не помню, чтобы известный программист проповедовал оптимизацию. Обычно оптимизируют "узкие места". Но выбор, конечно, за вами ;-)

Мне по поводу тернарного оператора тоже кажется что так:

var TicketExit =   TicketPrice   ? parseFloat(TicketPrice) * TicketCount
                                 : 0;

Более читабельно чем во втором случае, но как показал случай с топик стартером темы откуда вы взяли пример, ему это было не очевидно. Потому и говорю, тут дело привычки и стиля написания кода (в некоторых случаях и знание синтаксиса), тоже будут играть роль как Вы выразились во "Времени программиста" которое дорого. Все зависит от конкретного случая :) и как Вы правильно заметили "выбор, конечно, за вами ;-)"

Спасибо за ответы, однако все же проблема пока остается открытой :)
Оптимизация кода и правильный синтаксис это конечно хорошо, особенно если учесть что я пока еще ламер в яваскрипте, хотя знаю неплохо некоторые другие языки программирования, но все же хотелось бы узнать как же все таки преодоеть эту зарисовку диалога смайлами, когда словно теряется весь остальной HTML код..
:rolleyes:
Я думал использовать innerHTML(document.getElementById("smiles").innerH TML="<IMG SRC=chat/smile/"+s+".gif>"; ), но судя по всему это тут не поможет - ведь смайлы должны идти друг за другом, логически подумать если оно их и должно поидее писать вот так вот на том месте где вмонтирован document.write, но стоит выбрать категорию и снова воспользоваться функцией и опять тоже самое. :(

Если правильно понял Вас, то думаю это решение Вашей проблемы, ну или по крайней мере поможет Вам разобраться в нём:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<script type="text/javascript">
			function addSmile(sm){
				var i = 0;

				var txt = document.getElementById('text');
				var str = txt.innerHTML;

				while(i<sm.length) str += '<IMG SRC=chat/smile/'+sm[i++]+'.gif>';

				txt.innerHTML = str;
			}

			function selectkat(kat){
				if(kat=="1"){
					var sm = new Array("smile1", "smile2", "smile3");
					addSmile(sm);
				}
				if(kat=="2"){
					var sm = new Array("smile4", "smile5", "smile6");
					addSmile(sm);
				}
			}
		</script>
	</head>
	<body>
		<span onClick="selectkat(1);">Приветствие</span><span onClick="selectkat(2);">Прощание</span>
		<p id="text">Какойто текст.</p>
	</body>
</html>

или воспользоваться document.createElement, document.appendChild

var img = document.createElement('img');
img.src = '...';
container.appendChild(img);

но лучше добавлять в DOM что-либо за один вызов, а не по очереди все img. Т.е. Лучше создать контайнер, в него поместить img, а потом уже вставлять в документ этот контейнер