Javascript-форум - Калькулятор с вариантом значений.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Калькулятор с вариантом значений. (https://javascript.ru/forum/misc/65063-kalkulyator-s-variantom-znachenijj.html)

warren buffet,
супер, однако params и прочее это именно то ~~дерево~~ роща о котором я толковал. угу именно так, у меня терпения не хватило на такое, да и разбить как не додумался, спасибо.

Это не дерево, просто когда погромиста допускают до веб-строительства, он и делает как в туторах для десктопа вычитал, нихера не понимая, что губит весь проект. Под каждую услугу надо делать страницу, а не могилить все в дебильных интерфейсах. Страница это такие священные вещи как адрес, заголовок, h1, семантическое ядро (тексты) и картинки. Интерфейсы не индексируются.

Применительно к ваннам этим, 4 страницы. Он думает нифига себе, ради материала паги переключать. Однако люди ищут "ремонт чугунной ванны" и находят через ПС страницу с названием "ремонт чугунной ванны", а его страницу не найдут никогда, даже если он ее всю заспамит ключевиками. У него-то всего 1 страница и всего 1 название.

Это не дерево, а просто списки. В SQL это была бы таблица услуг и таблицы опций и между ними таблица N:N которую сейчас заменяют одинаковые ключи в параметрах.

Деревом является адрес, например Россия - список городов. Город - список улиц. Улица - список домов. А эти продуктовые опции списки всего 1 уровня и на деревья такие листики не похожи. В товаре может быть 10 списков с 1-м уровнем. Например бренд. Это список А уже сама таблица брендов ссылается на страну. Вроде бы дерево, но какое это дерево, это веточка. )))

Насчет деревьев, чтобы срубить его уже к чертям. Дерево - иерархия. Иерархическая структура данных, родитель-потомки, которые рожают потомков потом становясь родителями. У потомком всегда есть родитель, иначе он корень, root. Ну вот, то есть по дереву можно лазить туда-сюда. А с этих списков куда лазить? К товару? Так товар всяко имеет какой-то цвет и какую-то форму.

Все равно что Россия как угодно имеет город Москва. По приколу дефолт сити, да? А если списки возможных свойств принимать за деревья, так и будет - Россия обладает таким свойством как Москва, а Москва обладает таким свойством как Арбат.

На самом деле поступают так. Берут товары и делают характеристику. Взяли несколько шапок разных, формально описали, ага, вот общее, вот частное. Общее в общую таблицу, частное в списки. Готово.

Переносить сущности вещного мира в формализованные описания надо конечно уметь и вот тут самая мякотка. Почему ПРОГРАММИСТ занимается формализацией списком услуг? Это дело продавца вообще-то. Как он тогда ответит на звонок, если не знает, из чего его блеать собственные услуги или товары состоят?

Программист не виноват, он как пианист, делает что может. Если бы заказчик дал ему хотя бы екзель, по которому хотя бы операто на телефоне может ответить, чем контора вообще занимается, программисту бы деваться было бы некуда, кроме как сконвертить екзель в DDL-DML или в json. Какой заказчик, такой и исполнитель. Но самая мякота, что такой и клиент у них будет. Хороший клиент найдет "реставрация чугунной ванны", а плохой клиент останется этому специалисту нанятому тем специалистом не понимающим в чем он вообще специалист.

Цитата:

Сообщение от warren buffet (Сообщение 429801)

Услуги и товары одни и те же сущности.

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

<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">

<script>

var

CURRENCY = ' руб.',

works={

	title:'Услуга',
	data:{
		1:'Эмалировка',
		2:'Старкрил 2',
		3:'Жидкий акрил',
		4:'Акриловый вкладыш'
	},
	
},

params={

	opt:{
		title:'Опции',
		data:{
			1:'Установка уголка',
			2:'Монтаж экрана',
			3:'Монтаж слива',
			4:'Счетчик горячей воды',
			5:'Счетчик холодной воды'
		}
	},

	hue:{
		title:'Оттенок',
		data:{
			1:'Белый',
			2:'Красный',
			3:'Желтый',
			4:'Синий'
		}
	},

	len:{
		title:'Длина, см',
		data:{
			1:'120',
			2:'150',
			3:'170',
			4:'200'
		}
	}
},

offers={

	1:{
		price:1500,
		params:{
			len:{
				1:1400,
				2:1500,
				3:1500
			},
			hue:{
				1:0,
				2:120,
				3:150,
				4:90
			},
			opt:{
				1:1500,
				2:1700,
				3:2000,
				4:3000,
				5:2000
			}
		}
	},
	
	2:{
		price:2500,
		params:{
			len:{
				1:1200,
				2:1300,
				3:1700
			},
			hue:{
				1:0,
				2:220,
				3:250,
				4:190

			},
			opt:{
				1:1200,
				2:1500,
				3:1800,
				4:2900,
				5:2500
			}
		}
	},
	
	3:{
		price:1900,
		params:{
			len:{
				1:1200,
				2:1780,
				3:1499
			},
			hue:{
				1:0,
				2:126,
				3:145,
				4:199
			},
			opt:{
				1:1500,
				2:1700,
				3:2000,
				4:3000,
				5:2000
			}
		}
	},
	
	4:{
		price:1500,
		params:{
			len:{
				1:1400,
				2:1500,
				3:1500
			},
			hue:{
				1:0,
				2:120,
				3:150,
				4:90
			},
			opt:{
				1:1500,
				2:1700,
				3:2000,
				4:3000,
				5:2000
			}
		}
	}
}

total=0,prodList=calcButton=null;

function resetList(el){
	v=el.querySelectorAll('select');
	for(var i=0;i<v.length;i++)
		v[i].selectedIndex=-1;
}

function renderParams(ev){

	if(ev.target.nodeName!='SELECT') return;
	var v=ev.target.value;
	if(!(v in offers)) return;
	var offer=offers[v],html=[];
	
	total=offer.price;
	
	for(v in offer.params) {
		var h=[];
		for(var p in offer.params[v])
			h.push(renderOption(offer.params[v][p],params[v].data[p]
				+' + '+offer.params[v][p]+CURRENCY));
		html.push('<label>'+params[v].title+': </label>'
			+'<select>'+h.join('')+'</select>'+'<br/><br/>');
	}
	
	prodList.innerHTML=html.join('');
	resetList(prodList);
	calcButton.disabled=false;
}

function renderOption(v,t){
	return '<option value="'+v+'">'+t+'</option>';
}

function renderOptions(obj){
	var html=[];
	for(var p in obj)
		html.push(renderOption(p,obj[p]+': '+offers[p].price+CURRENCY));
	return html.join('');
}

function renderWorks(classname) {
	var el=document.querySelector('.'+classname);
	el.innerHTML='<label>'+works.title+': <label>'
		+'<select>'+renderOptions(works.data)+'</select>';
	resetList(el);
	el.addEventListener('change',renderParams);
}

function renderTotal(){
	v=prodList.querySelectorAll('select');
	for(var i=t=0;i<v.length;i++)
		t+= +v[i].value;
	document.querySelector('.total-sum').textContent=(total+t)+CURRENCY;
}

</script>

</head>
<body>

<div class="filters-block"></div><br/><br/>
<div class="product-list"></div>
<button class="calc-total" disabled="disabled">Рассчитать</button><br/><br/>
<div class="total-sum"></div>

<script>
prodList=document.querySelector('.product-list');
calcButton=document.querySelector('.calc-total');
calcButton.addEventListener('click',renderTotal);
renderWorks('filters-block');
</script>

</body>
</html>

Огромное спасибо за вашу статью! Почти смог реализовать на сайте такой калькулятор. Знаю, что неправильно, но у меня все-равно одностраничник.

Подскажите пожалуйста, как мне можно добавлять значение в выбранный элемент, заменив чем-нибудь другим html.push
Я вот про этот момент:

html.push('<label>'+params[v].title+': </label>'
			+'<select>'+h.join('')+'</select>'+')

Я пробовал менять его на

document.getElementById('myelementt').innerHTML =

Но тогда пропадает изменение цены в зависимости от выбора второго элемента, то есть скрипт работает не корректно. Буду очень благодарен за помощь. Заранее спасибо!