Javascript-форум - Простой калькулятор

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

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Простой калькулятор (https://javascript.ru/forum/events/45159-prostojj-kalkulyator.html)

Простой калькулятор

Подскажите, пожалуйста, как должен выглядеть и быть написан простейший калькулятор:

Я хочу заказать  
<select name="services">
<option value=""></option>
<option value="copywriting">Копирайтинг и SEO-копирайтинг</option>
<option value="selltext">Продающий текст</option>
<option value="hometext">Текст на главную страницу сайта</option>
// и т.д.
</select>
<br>
Мне нужен текст объемом
<input type="text" name="vol" size="3" value="" placeholder="3500"> знаков (без пробелов)
<br>

который перемножает между собой выбранный select и объем и выводит 'result' в текстовую графу.

Да, "option value=" нужно оставить в текстовом виде, т.к. форма отправляется на почту, а некоторые услуги стоят одинаково.

В идеале, если объем больше N1, то вся сумма должна умножаться на скидку M1, а если больше N2, то умножаем на скидку M2

Спасибо.

AlexFoxx,
а сами капельку ну чуть чуть ?

Я чего не пойму...если я ID припишу всему селектору, то значения для расчетов будут браться из value (где мне надо чтобы был текст)?
Остальное тащем-та просто.

В общем, как мне правильно присвоить числовое (цену) значение опциям селектора?

AlexFoxx,
:cray:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
   Я хочу заказать
<select name="services"  >
<option value=""></option>
<option value="copywriting">Копирайтинг и SEO-копирайтинг</option>
<option value="selltext">Продающий текст</option>
<option value="hometext">Текст на главную страницу сайта</option>
// и т.д.
</select>
<br>
Мне нужен текст объемом
<input type="text" name="vol" size="3" value="" placeholder="3500"> знаков (без пробелов)
<br>
<script>
   var ser = document.querySelector('[name="services"]'),
       vol = document.querySelector('[name="vol"]'),
       sum = {
           "copywriting": 100,
           "selltext": 200,
           "hometext": 500
       };
   ser.onchange = vol.oninput = function () {
       alert((+vol.value || 0) * (sum[ser.value] || 0))
   }
</script>
</body>

</html>

Большое спасибо!

<option value="copywriting" data-price="100500">Копирайтинг и SEO-копирайтинг</option>

// canonical js

try{
  alert('Yo have to pay: '+getElementById('copywriting').dataset.price * document.getElementsByName('vol')[0].value)+'bucks';
}catch(e){
  alert('something went wrong');
}

Я лишь одного не понял - у сеошников и копирайтеров не принято публиковать прайсы?

Другими словами если юзер видит цену, то и скрипт ее увидит там же, или в лучшем месте откуда юзеру рендерится.

А если скрипт не видит цену, то юзер что видит?

Цитата:

Сообщение от kostyanet (Сообщение 298149)

Я лишь одного не понял - у сеошников и копирайтеров не принято публиковать прайсы?
Другими словами если юзер видит цену, то и скрипт ее увидит там же, или в лучшем месте откуда юзеру рендерится.
А если скрипт не видит цену, то юзер что видит?

На копирайт вроде указывают всегда точную цену за т.з. или за "текст".

Есть у нас и прайсы и все цены видит юзер...другое дело, что копирайтеры вроде как тексты пишут, а не коды :no: Тем не менее, задача оказалась решена - все же у нас простенький wordpress-сайт, а не портал с кучей услуг. Получился конечно былокод и при изменении цен надо будет делать двойную работу, но пока пусть так будет...
Подскажите мне, плз, еще один простой момент и я буду бесконечно счастлив.
Быдлокод:

<script>
   var ser = document.querySelector('[name="services"]'),
       vol = document.querySelector('[name="vol"]'),
       sum = {
           "copywriting": 350,
           "selltext": 600,
           "hometext": 550,
	   "abouttext": 500,
	   "formedia": 450,
	   "pressrel": 400,
	   "goods": 200,
	   "rewriting": 200,
	   "commercial": 500,
	   "comments": 80,
	   "context": 100,
	   "blogs": 350,
	   "mailing": 350,
	   "news": 350,
	   "present": 750,
	   "poetry": 200,
	   "prose": 250,
	   "editing": 150,
	   "correction": 100
	     };
   ser.onchange = vol.oninput = function calc () {
   var price = 0;
       price = ((+vol.value || 0) * (sum[ser.value] || 0)/1000);
result.innerHTML = price;
   }
</script>

Как правильно написать тут же на яве про скидки, типа

if $vol > 49999 { $price = $price * 0.9; }
elseif $vol > 99999 { $price = $price * 0.85; }
else ...ну обычная $price

как все это правильно вкрутить в тот быдлокод?

AlexFoxx,
:-?

var ser = document.querySelector('[name="services"]'),
       vol = document.querySelector('[name="vol"]'),
       sum = {
           "copywriting": 350,
           "selltext": 600,
           "hometext": 550,
	   "abouttext": 500,
	   "formedia": 450,
	   "pressrel": 400,
	   "goods": 200,
	   "rewriting": 200,
	   "commercial": 500,
	   "comments": 80,
	   "context": 100,
	   "blogs": 350,
	   "mailing": 350,
	   "news": 350,
	   "present": 750,
	   "poetry": 200,
	   "prose": 250,
	   "editing": 150,
	   "correction": 100
	     };
   ser.onchange = vol.oninput = function calc () {
   var price = 0, text = +vol.value || 0;
       price = (text * (sum[ser.value] || 0)/1000);
       if (text > 99999) price *= 0.85;
       else if (text > 49999) price *= 0.9;
result.innerHTML = price;
   }

:-? получается, что при подсчете скидки в 15% код как-то хитро выполняет оба условия что ли...т.е. первая скидка
считается правильно, а вторая совсем неверно((

т.е. при vol = 100.000 переменная сразу больше и 49.999 и 99.999

а надо, чтобы если чел заказывает от 50.000 знаков, то скидка 10%, а если от 100.000, то уже 15% (но не 25 же))

AlexFoxx,
поправил else if (text > 49999) price *= 0.9; 28 строка

О! :dance: Спасибо огроменнейшее!!! :thanks: