Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сложить два числа из двух функций (https://javascript.ru/forum/dom-window/72125-slozhit-dva-chisla-iz-dvukh-funkcijj.html)

rasta 10.01.2018 13:45

Сложить два числа из двух функций
 
Добрый день!
Подскажите как лучше сложить полученные суммы из двух функций чтобы вывести общую стоимость (в div с id="price3")? Думал сделать 3-ю функцию которая будет считывать из первых 2-х дивов, складывать и выводить, но должен же быть вариант попроще.
Краткое описание: при клике на изображение функция ifelsefunction перемещает его в div с id=pict и выводит его цену в div id=price, потом выбирается из выпадающего списка вариант оснастки и при помощи функции osnastka() так же показывается изображение оснастки (в div id=pict2) и цена (div id=price2). Нужно чтобы эти две цены складывались и показывались в div id=price3.
Полный код и его работу можно увидеть на сайте http://www.pechaty-shop.ru/makets.html

<div  style="float:left;">
  <div style="width:250px; height:250px; background:white;" id="pict"></div>
  <div id="price"></div>
  </div>
 <div style="float:left;">  <select onchange="osnastka()" id="selcolor">
    <option value="01">Ручная</option>
    <option value="02">Автоматическая</option>
</select>
   <div style="width:250px; height:250px; background:white;" id="pict2"></div> 
   <div id="price2"></div></div>
   <div id="price3"></div></div>
 <script>
    function osnastka() { 
var seltheme = document.getElementById("selcolor").value;
     var elem = document.getElementById("pict2");
     if(seltheme == "01") {
    elem.style.background = "url( '/pict/ruchnaya.png') no-repeat";
       price2.innerHTML= 'Стоимость 500 руб.';
     }
     else  if(seltheme == "02") {
       elem.style.background = "url( '/pict/colop40.png') no-repeat"; 
       price2.innerHTML='Стоимость 800 руб';
     }
   }
   
   function ifelsefunction(maket,cost) { 
     var elem = document.getElementById("pict");
    elem.style.background = "url('/pict/ooo/"+maket+".png') no-repeat";
 
     price.innerHTML= 'Стоимость ' +cost+' руб.';
     
   }
  </script>
<h2>Бесплатные макеты:</h2> 
  <table>
    <tr>
      <td align="center">
  <img onclick="ifelsefunction('n1','100')" src="/pict/ooo/n1.png"> <br>
        <span>№1</span>
        </td>
      <td align="center">
  <img  onclick="ifelsefunction('n2',200)" src="/pict/ooo/n2.png">  <br>
         <span>№2</span>
      </td>
      <td align="center">
  <img  onclick="ifelsefunction('n3',300)" src="/pict/ooo/n3.png"> <br>
 <span>№3</span>
      </td></tr></table>

Nexus 10.01.2018 13:54

Результаты подсчетов этих функций можно вывести в общую для этих функцию область видимости и читать сумму из этих данных.

rasta 10.01.2018 17:07

Цитата:

Сообщение от Nexus (Сообщение 474653)
Результаты подсчетов этих функций можно вывести в общую для этих функцию область видимости и читать сумму из этих данных.

попробовал сделать вот так, почти работает но выводит в div id=price3 либо 800undefined либо 500undefined. В зависимости от выбранного в выпадающем списке. Думаю проблема где то в функции ifelsefunction

<div  style="float:left;">
  <div style="width:250px; height:250px; background:white;" id="pict"></div>
  <div id="price"></div>
  </div>
 <div style="float:left;">  <select onchange="osnastka()" id="selcolor">
    <option value="01">Ручная</option>
    <option value="02">Автоматическая</option>
</select>
   <div style="width:250px; height:250px; background:white;" id="pict2"></div> 
   <div id="price2"></div></div>
  <div onclick="rez()" id="price3">rkbr</div>
 <script>
    function osnastka() { 
var seltheme = document.getElementById("selcolor").value;
     var elem = document.getElementById("pict2");
      var stoim1;
     if(seltheme == "01") {
    elem.style.background = "url( '/pict/ruchnaya.png') no-repeat";
       stoim1='500';
       price2.innerHTML= 'Стоимость '+stoim1+' руб.';
     }
     else  if(seltheme == "02") {
       elem.style.background = "url( '/pict/colop40.png') no-repeat"; 
       stoim1='800';
       price2.innerHTML='Стоимость '+stoim1+' руб';
     }
      return stoim1;
   }
  
    
     function ifelsefunction(maket,stoim2) { 
     var elem = document.getElementById("pict");
    elem.style.background = "url('/pict/ooo/"+maket+".png') no-repeat";  
     price.innerHTML= 'Стоимость ' +stoim2+' руб.';     
   return stoim2;
   }
   function rez() {
  var stoim3 = osnastka();
      var stoim4 = ifelsefunction();
   price3.innerHTML= stoim3+stoim4;
   }
  </script>
<h2>Бесплатные макеты:</h2> 
  <table>
    <tr>
      <td align="center">
  <img onclick="ifelsefunction('n1','0')" src="/pict/ooo/n1.png"> <br>
        <span>№1</span>
        </td>
      <td align="center">
  <img  onclick="ifelsefunction('n2',0)" src="/pict/ooo/n2.png">  <br>
         <span>№2</span>
      </td>
      <td align="center">
  <img  onclick="ifelsefunction('n3',0)" src="/pict/ooo/n3.png"> <br>
 <span>№3</span>
      </td>

Nexus 10.01.2018 17:22

Может так?
<div style="float:left;">
   <div style="width:250px; height:250px; background:white;" id="pict"></div>
   <div id="price"></div>
</div>
<div style="float:left;">
   <select onchange="osnastka()" id="selcolor">
      <option value="01">Ручная</option>
      <option value="02">Автоматическая</option>
   </select>
   <div style="width:250px; height:250px; background:white;" id="pict2"></div>
   <div id="price2"></div>
</div>
<div onclick="rez()" id="price3">rkbr</div>

<h2>Бесплатные макеты:</h2>
<table>
<tr>
   <td align="center">
      <img onclick="ifelsefunction('n1','0')" src="/pict/ooo/n1.png"> <br>
      <span>№1</span>
   </td>
   <td align="center">
      <img onclick="ifelsefunction('n2',0)" src="/pict/ooo/n2.png"> <br>
      <span>№2</span>
   </td>
   <td align="center">
      <img onclick="ifelsefunction('n3',0)" src="/pict/ooo/n3.png"> <br>
      <span>№3</span>
   </td>
</tr>
</table>

<script>
	var prices=[0,0];
	
	function osnastka() {
		var seltheme = document.getElementById("selcolor").value;
		var elem = document.getElementById("pict2");
		
		if (seltheme == "01") {
			prices[0]=500;
			elem.style.background = "url( '/pict/ruchnaya.png') no-repeat";
		} else if (seltheme == "02") {
			prices[0]=800;
			elem.style.background = "url( '/pict/colop40.png') no-repeat";
		}
		document.getElementById('price2').innerHTML = 'Стоимость ' + prices[0] + ' руб';
	}


	function ifelsefunction(maket, price) {
		prices[1]=+price;
		document.getElementById('price').innerHTML = 'Стоимость ' + price + ' руб.';
		document.getElementById("pict").style.background = 
			"url('/pict/ooo/" + maket + ".png') no-repeat";
	}

	function rez() {
		document.getElementById('price3').innerHTML = prices.reduce(function(t,c){
			return t+c;
		},0);
	}
</script>

rasta 10.01.2018 17:41

Спасибо! Помогло! :dance:


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