Javascript-форум - Скрипт для вывода значений

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

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

- - Скрипт для вывода значений (https://javascript.ru/forum/misc/71398-skript-dlya-vyvoda-znachenijj.html)

Леонид777

15.11.2017 18:57

Скрипт для вывода значений

Ребят, доброго вечера.
Помогите сделать скрипт для калькулятора.
Его суть:
есть два селекта, при выборе значений селекта и нажатия на кнопку рассчитать должен показываться результат.
Всего 34 значения результата, у каждого значения своя комбинация селектов:

<div class="calculator-tampo1">

	    <br />
          
    	<a class="calc-tampo1-block">Расчет стоимости тампопечати по стандартным поверхностям (зажигалки, ручки, флешки, брелоки из пластика) </a>

	    <br />

	    <br />
      
      <br />

	    <select class="tirazh-tampo1" id="tirazh-tampo1">

	      <option selected></option>

	      <option value="1">100шт</option>

	      <option value="2">200шт</option>

	      <option value="3">300шт</option>

	      <option value="4">400шт</option>

	      <option value="5">500шт</option>

	      <option value="6">600шт</option>

	      <option value="7">700шт</option>

	      <option value="8">800шт</option>

	      <option value="9">900шт</option>

	      <option value="10">1000шт</option>

	      <option value="11">1500шт</option>

	      <option value="12">2000шт</option>
        
	      <option value="8">2500шт</option>

	      <option value="9">3000шт</option>

	      <option value="10">3500шт</option>

	      <option value="11">4000шт</option>

	      <option value="12">5000шт</option>        

	    </select>

	    - Тираж;

	    <br />

	    <br />


	 

	    <select class="nanesenie-tampo1" id="nanesenie-tampo1">

	      <option selected></option>

	      <option value="1">1 + 0</option>

	      <option value="2">2 + 0</option>

	    </select>

	    - Количество цветов нанесения;

	    <br />

	    <br />

	 

	    <button>Рассчитать!</button>

	    <br />

	    <br />	 

	    <div class="paket-result" style="font-weight:bold" id="result"></div>
          

	  </div>

Nexus

15.11.2017 19:47

Леонид777, что у вас не выходит сделать?

Леонид777

15.11.2017 20:01

Со скриптами вообще на Вы((( Незнаю как его написать

Lion777

15.11.2017 22:05

тип так

<html>
<head></head>
<body>
<div class="calculator-tampo1">
 
        <br />
           
        <a class="calc-tampo1-block">Расчет стоимости тампопечати по стандартным поверхностям (зажигалки, ручки, флешки, брелоки из пластика) </a>
 
        <br />
 
        <br />
       
      <br />
 
        <select class="tirazh-tampo1" id="tirazh-tampo1">
 
          <option selected></option>
 
          <option value="1">100шт</option>
 
          <option value="2">200шт</option>
 
          <option value="3">300шт</option>
 
          <option value="4">400шт</option>
 
          <option value="5">500шт</option>
 
          <option value="6">600шт</option>
 
          <option value="7">700шт</option>
 
          <option value="8">800шт</option>
 
          <option value="9">900шт</option>
 
          <option value="10">1000шт</option>
 
          <option value="11">1500шт</option>
 
          <option value="12">2000шт</option>
         
          <option value="8">2500шт</option>
 
          <option value="9">3000шт</option>
 
          <option value="10">3500шт</option>
 
          <option value="11">4000шт</option>
 
          <option value="12">5000шт</option>       
 
        </select>
 
        - Тираж;
 
        <br />
 
        <br />
 
 
      
 
        <select class="nanesenie-tampo1" id="nanesenie-tampo1">
 
          <option selected></option>
 
          <option value="1">1 + 0</option>
 
          <option value="2">2 + 0</option>
 
        </select>
 
        - Количество цветов нанесения;
        <br />
        <br />
     
       <button onclick="reslt()">Рассчитать!</button>
 
        <br />
 
        <br />    
 
        <div class="paket-result" style="font-weight:bold" id="result"></div>         
 
      </div>
<script>
var a = document.getElementById("tirazh-tampo1");
var b = document.getElementById("nanesenie-tampo1");
function reslt(){
    document.getElementById("result").innerHTML = "Результат: " + (+a.value + +b.value);
}

</script>
</body>
</html>

Леонид777

20.11.2017 15:07

Спасибо огромное, но нужно немножко другое...
Если значение первого селекта = 100, а значение второго = 1+0, то результ = 20
Если значение первого селекта = 200, а значение второго = 2+0, то результ = 30.
И так по аналогии.
Мне только 2-3 значения прописать - остальные сам сделаю)

laimas

20.11.2017 18:04

Цитата:

Сообщение от Леонид777

И так по аналогии

А если 5000 и 1, тогда какая аналогия? Опишите зависимость/закономерность этой аналогии если о на есть.

Dilettante_Pro

20.11.2017 18:06

laimas,
Вы далеко шагнули - я даже
Если значение первого селекта = 100, а значение второго = 2+0, то результ = ???
не смог осилить...

Леонид777

20.11.2017 18:16

Зависимости как таковой нет.
У каждой вариации двух селектов свой результат.
Всего получается 34 результата.

Dilettante_Pro

20.11.2017 18:24

Леонид777,

Цитата:

Сообщение от Леонид777

У каждой вариации двух селектов свой результат.

И откуда его брать?

laimas

20.11.2017 18:32

Цитата:

Сообщение от Dilettante_Pro

Вы далеко шагнули

Я это принял как неизбежное. )

Леонид777

20.11.2017 18:37

Если tirazh-tampo1 = 100, nanesenie-tampo1 = 1+0, то результ = 20
Если tirazh-tampo1 = 200, nanesenie-tampo1 = 2+0, то результ = 30
Если tirazh-tampo1 = 100, nanesenie-tampo1 = 2+0, то результ = 40.
Всего 34 вариации селектов:
1-ый селект - 17 значений, второй - 2 значения. 17*2 = 34.
У каждой комбинации свой результ.

laimas

20.11.2017 19:07

Леонид777,
мы знаем, что килограмм гвоздей стоит 100 руб., поэтому несложно узнать сумму за N килограмм = 100 * N. Также знаем, что есть коэффициент за размер гвоздей: 50 мм - 1, 80 мм - 1.2, 100 - 1.3, .... Умножив сумму за N на коэффициент получим результат.

Это расчет. У вас нет никакого расчета, есть что-то фиксированное, о котором известно только вам, ибо 100 + 1 никак не может быть 20, как и другое. Значит опишите эти комбинации объектом и выбирайте их по значениям выбранных списков:

var coll = {
    '1' : {'1': 20, '2': X, ...}, //при выборе 1 во втором списке
    '2' : {'1': 40, '2': X, ...}  //при выборе 2 во втором списке
}

Nexus

20.11.2017 19:35

Осталось только "c" заполнить (если это вообще будет работать)

<div class="calculator-tampo1"><br/><a class="calc-tampo1-block">Расчет стоимости тампо печати по стандартным поверхностям (зажигалки, ручки, флешки, брелоки из пластика)</a><br/><br/><br/><select class="tirazh-tampo1" id="tirazh-tampo1"><option selected></option><option value="1">100шт</option><option value="2">200шт</option><option value="3">300шт</option><option value="4">400шт</option><option value="5">500шт</option><option value="6">600шт</option><option value="7">700шт</option><option value="8">800шт</option><option value="9">900шт</option><option value="10">1000шт</option><option value="11">1500шт</option><option value="12">2000шт</option><option value="8">2500шт</option><option value="9">3000шт</option><option value="10">3500шт</option><option value="11">4000шт</option><option value="12">5000шт</option></select>-Тираж;<br/><br/><select class="nanesenie-tampo1" id="nanesenie-tampo1"><option selected></option><option value="1">1+0</option><option value="2">2+0</option></select>-Количество цветов нанесения;<br/><br/><button type="button"onclick="calc();">Рассчитать!</button><br/><br/><div class="paket-result" style="font-weight:bold" id="result"></div></div>
	  <script>
		var a = document.getElementById("tirazh-tampo1"),
			b = document.getElementById("nanesenie-tampo1"),
			c={
				'1_1':10,
				'1_2':30,
				'2_2':40,
			};
			
		[a,b].forEach(function(item){
			item.onchange=calc;
		});
		
		function calc(){
			document.getElementById("result").innerHTML = c[a.value+'_'+b.value]||0;
		};
		</script>

Вопрос по оформлению кода: зачем после каждой строки оставлять минимум 1 пустую строку?
Так читается лучше? Почему не 6?

Леонид777

20.11.2017 20:07

Как привести скрипт примерно к такой конструкции:

var coll = {
'1000 руб' = ['100,1+0'];
'2000 руб' = ['200,1+0'];
'3000 руб' = ['100,2+0'];

};

И как вывести var coll в результ?

laimas

20.11.2017 20:15

Леонид777,
текст опций списка, это для удобного восприятия человеком, а их из значения, это для удобного употребления программной средой. У вас опции имеют значения от 1 до ..., и это будет удобно для языка. Зачем же описывать наборы не значениями опций, а их текстами?

И ответ вы хотите получать как 20, 40, ..., а описываете опять таки текст 100, 1+0, ... Зачем?

Леонид777

20.11.2017 20:21

Это для наглядности. В скрипте, конечно, лучше значениями.

Тогда так:
var coll = {
'1000 руб' = ['1','1'];
'2000 руб' = ['2','1'];
'3000 руб' = ['3','1'];

};

И как вывести var coll в результ?

laimas

20.11.2017 20:49

Цитата:

Сообщение от Леонид777

Это для наглядности.

Второй пример "наглядности" еще более ужасен, чем первый. :)

Пусть при выборе в двух списках:
если во втором выбрано D, то при выборе в первом должно быть:
для A - 20
для B - 40
для С - 80
а если во втором выбрано E, тогда
для A - 50
для B - 60
для С - 90

Эти значения и описывает объект, свойствами которого являются значения опций списков, по которым они и получаются:

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var coll = {
        '1': {'1': 20, '2': 40, '3': 80},
        '2': {'1': 50, '2': 60, '3': 90}     
    },
    slc = $('select').change(function() {
        $('#out').text(coll[slc.last().val()][slc.first().val()])    
    });
});
</script>
</head>
<body>
<select>
   <option value="1">A</option>
   <option value="2">B</option>
   <option value="3">C</option>
</select>

<select>
   <option value="1">D</option>
   <option value="2">E</option>
</select>
<div id="out">20</div> 
</body>
</html>

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

Это на jQuery, но не проблема и без нее.

Леонид777

20.11.2017 21:03

А если без JQuery?
Как лучше?

laimas

20.11.2017 21:11

Цитата:

Сообщение от Леонид777

Как лучше?

Если ваш сайт использует jQuery, то и пишите на нем. Если нет и это вся задача, то проще и без него обойтись.

Леонид777

20.11.2017 21:19

Примерно данную конструкцию я и хотел:

var coll = {

'1': {'1': 20, '2': 40, '3': 80},

'2': {'1': 50, '2': 60, '3': 90}

},

Только вопрос вывода по нажатию на кнопку... Как лучше сделать?

laimas

20.11.2017 21:33

Цитата:

Сообщение от Леонид777

Только вопрос вывода по нажатию на кнопку...

На - <button>Рассчитать!</button>?

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var coll = {
        '1': {'1': 20, '2': 40, '3': 80},
        '2': {'1': 50, '2': 60, '3': 90}     
    },
    slc = $('select');
    
    $('button').click(function() {
        $('#out').text(coll[slc.last().val()][slc.first().val()])    
    });
});
</script>
</head>
<body>
<select>
   <option value="1">A</option>
   <option value="2">B</option>
   <option value="3">C</option>
</select>

<select>
   <option value="1">D</option>
   <option value="2">E</option>
</select>
<div id="out">20</div> 

<button>Рассчитать!</button>
</body>
</html>

Леонид777

21.11.2017 12:32

Всё супер)))
Только два вопроса:
1) Как jQuery сделать java?
2) Как сделать вывод результата только после нажатия на кнопку (результат выводится сразу при загрузке страницы)?

Dilettante_Pro

21.11.2017 14:14

Не знаю, как насчет java, а на JS

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
    var coll = {
        '1': {'1': 20, '2': 40, '3': 80},
        '2': {'1': 50, '2': 60, '3': 90}     
    },
    slc = document.querySelectorAll('select');
    
    document.querySelector('button').onclick = function() {
        document.querySelector('#out').innerText = coll[slc[1].value][slc[0].value];    
    };
});
</script>
</head>
<body>
<select>
   <option value="1">A</option>
   <option value="2">B</option>
   <option value="3">C</option>
</select>

<select>
   <option value="1">D</option>
   <option value="2">E</option>
</select>
<div id="out"></div> 

<button>Рассчитать!</button>
</body>
</html>

Леонид777

21.11.2017 15:44

Спасибо огромное. Теперь то что надо.
Остальное уже сам доработаю)))

Часовой пояс GMT +3, время: 05:53.