Скрипт подсчета коммунальных услуг

[dark_mc]

Доброго времени суток! Пишу диплом и столкнулся с задачей которую не могу решить, точнее не знаю каким методом решить ее, сам изучаю javascript не очень то давно, надеюсь вы подскажете что и как!

И так, задача состоит в том, что бы изменять значения скрипта на странице в отдельном окне, что бы не трогать сам код! Но при этом он должен запоминать введенные значения при обновлении страницы.

Например в коде изменить цифры на свои, и скрипт должен их запомнить/заменить.

var svet= "0.32300"; 
var svetno= "63";
var gazyes = "1.7880"; 
var gazno = "43.13"; 
var hotyes = "27.76";
var hotno = "15.81"; 
var coldyes = "31.00";
var coldno = "38.25";
var otop = "84.67";
var musor = "26.00";

function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 43 || charCode > 57))
            return false;

         return true;
      }

И другая задача состоит в том что бы результаты подсчета(в самом калькуляторе), сохранить как скриншот либо что то наподобии истории в личный кабинет, подскажите как лучше реализовать такую задачу!? Буду благодарен!

[Leon-on12]

Первое что приходит в голову это localStorage.
Со скриншотом подсказать не могу. Но могу предложить значения калькулятора записывать в localStorage. И при заходе в личный кабинет загружать localStorage соответствующего пользователя ему на компьютер. Или на оборот при регистрации.

[dark_mc]

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

вот к примеру:
задал поле где будет вводиться значение, присвоил id

<section>
  <form id="form" action="#" method="POST">
  <input id="svet" name="svet" type="text" />
  <input id="svetno" name="svetno" type="text" /> 
</form>
</section>

сам скрипт где задано все

var svet= "0.32300"; 
var svetno= "63";
var gazyes = "1.7880"; 
var gazno = "43.13"; 
var hotyes = "27.76";
var hotno = "15.81"; 
var coldyes = "31.00";
var coldno = "38.25";
var otop = "84.67";
var musor = "26.00";

function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 43 || charCode > 57))
            return false;

         return true;
      }

и скрипт с localStorage:

if (window.localStorage) {
  var svet = document.querySelectorAll('[name]');

  for (var i = 0, length = elements.length; i < length; i++) {
    (function(svet) {
      var name = svet.getAttribute('name');

      svet.value = localStorage.getItem(name) || '';

      svet.onkeyup = function() {
        localStorage.setItem(name, svet.value);
      };
    })(svet[i]);
  }
}

или надо сам скрипт, где сами значения вписаны, туда и дописать localStorage? Честно запутался,облазил много сайтов с примерами, пробовал разные подходы но так ничего и не смог написать что бы работало.


Спасибо за ответ!

[Leon-on12]

Вы как-то очень сложно действуете. Я предлагаю вам создать массив и записать в него все свои данные последовательно. И в localStorage поместить только этот массив.
Это проще чем крутить счётчики.
А так как у вас дискретный набор элеметнов, советую каждому элементу назначить своё конкретное место.
Тогда вам понадобиться всего одно место в localStorage.
Соответственно и с localStorage по сути работать не надо. Надо только загрузить в него свой массив по окончанию работы. Или выгрузить его из localStorage при начале работы.
Думаю что работать с массивом вам будет проще чем с элементами localStoragа.
Хотя понять почему ваше решение с назначением уникального ключа каждой переменной не работает, понять не могу.
----
А если обременить свой код обильными комментариями, или же просто после полной отладки заменять переменные на соответствующие элементы массива, то можно избежать кучи варов, но к сожалению тогда читаемость кода сильно снизиться.
Но если создать отдельный файлик где написать что на что меняется, и если не лень, то каждый раз можно проводить прямую или обратную замену, в зависимости от того что Вы собираетесь делать, запускать или редактировать код.

В качестве упражнения, и когда задолбает проводить замену, а от самого калькулятора будет кипеть мозг, можно отвлечься написанием автоматического заменителя всех варов на соответствующие элементы массива при запуске кода.

[tsigel]

И другая задача состоит в том что бы результаты подсчета(в самом калькуляторе), сохранить как скриншот либо что то наподобии истории в личный кабинет, подскажите как лучше реализовать такую задачу!? Буду благодарен!

Есть библиотека html2canvas, может сделать скрин не сложной верстки, но сохранить без сервера не получится.

[dark_mc]

не работает, понять не могу.

elements.length

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

код:

//поле для ввода нового значения
<section>
  <form id="form" action="#" method="POST">
  <input id="svet" name="svet" type="text" />
</form>
</section>
//поле для калькулятора
<table class="style12" style="width: 138px; "> 
            <tbody> 
              <tr> <td>Электричество</td> </tr>
              </tbody>
            </table>
            </td> <td> 
            <table class="style12" style="width: 183px; "> 
            <tbody> 
              <tr> <td> <input id="sS" style="width: 120px; " type="text" onfocus="changeFlag(0);" onkeyup="CalcSum(1);" onkeypress="return isNumberKey(event)">$</td> </tr>
             
              <tr> <td> <input id="sE" type="text" style="width: 120px; " onfocus="changeFlag(1)" ;="" onkeyup="CalcSum(1);" onkeypress="return isNumberKey(event)">квт</td> </tr>
             </tbody>
           </table>
         </td> <td> 
          <table> 
            <tbody> 
              <tr><td>Количество месяцев</td></tr>
             
              <tr><td> <select id="selS" name="D4" onchange="CalcSum(1);"> 
			           <option value="1">1</option> 
					   <option value="2">2</option> 
					   <option value="3">3</option> 
					   <option value="4">4</option> 
					   <option value="5">5</option> 
					   <option value="6">6</option> 
					   <option value="7">7</option> 
					   <option value="8">8</option> 
					   <option value="9">9</option> 
					   <option value="10">10</option> 
					   <option value="11">11</option> 
					   <option value="12">12</option> 
					   </select></td></tr>
              </tbody>
             </table>
         </td> <td><span id="sv"></span><select id="Sel1" name="D4" onchange="CalcSum(1);Show(1);"> 
		 <option value="0">Обычный дом</option> 
		 <option value="1">Дом с электроплитами</option> 
		 </select></td> 
		 <td> &nbsp;</td> </tr>

var svet= "0.32300"; 
var svetno= "63";
var gazyes = "1.7880"; 
var gazno = "43.13"; 
var hotyes = "27.76";
var hotno = "15.81"; 
var coldyes = "31.00";
var coldno = "38.25";
var otop = "84.67";
var musor = "26.00";

function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 43 || charCode > 57))
            return false;

         return true;
      }

localStorage:

if (window.localStorage) {
  var svet = document.querySelectorAll('[name]');

  for (var i = 0, length = svet.length; i < length; i++) {
    (function(svet) {
      var name = svet.getAttribute('name');

      svet.value = localStorage.getItem(name) || '';

      svet.onkeyup = function() {
        localStorage.setItem(name, svet.value);
      };
    })(svet[i]);
  }
}

код с калькулятора:

var flag = 0;

function changeFlag(index) {
    flag = index;
}

function Show(index) {
    switch (index) {
		case 1: 
            {
                var sn = document.getElementById('Sel1');
                var snVal = sn.options[sn.selectedIndex].value;
                if (snVal == 0) { document.getElementById('sv').innerHTML = svet; } 
                else if (snVal == 1) { document.getElementById('sv').innerHTML = svetno; } 
            } break;
}
}

function CalcSum(usluga) {
    if (flag == 1) {
        switch (usluga) {
            case 1:
                {
                document.getElementById("selS").disabled = false;
                var sE = document.getElementById('sE').value;
         
		var sn = document.getElementById('Sel1');
                var snVal = sn.options[sn.selectedIndex].value;
				
                var mes = document.getElementById('selS');
                var mesV = mes.options[mes.selectedIndex].value;

if (snVal == 0) { document.getElementById('sS').value = ((sE * svet) * mesV).toFixed(2); }
                else if (snVal == 1) { document.getElementById('sS').value = ((sE * svetno) * mesV).toFixed(2); }
				
            } break;
}
    }
    else if (flag==0) {
        switch (usluga) {
            case 1:
            {
                /*document.getElementById("selS").disabled = true;
                var sS = document.getElementById('sS').value;
                document.getElementById('sE').value = (sS / svet).toFixed(2);*/
				document.getElementById("selS").disabled = true;
                var sS = document.getElementById('sS').value;
                var sn = document.getElementById('Sel1');
                var snVal = sn.options[sn.selectedIndex].value;
                if (snVal == 0) { document.getElementById('sE').value = (sS / svet).toFixed(2); }
                else if (snVal == 1) { document.getElementById('sE').value = (sS / svetno).toFixed(2); }
            } break;
 }
    }
    var s = 0;
    
    if (document.getElementById('sS').value != null) { s = document.getElementById('sS').value; }
}

function GOS(index)
{
	switch (index) 
	{
        case 1:
		{
		   document.getElementById('sS').focus();
		} break;
		case 2:
		{
		   document.getElementById('sE').focus();
		} break;
}
}

Вот связал все,но почему то оно считает по тому значению, которое задано заранее в варе...как будто не происходит замена.

А может быть дело в библиотеке?

[dark_mc]

Есть библиотека html2canvas, может сделать скрин не сложной верстки, но сохранить без сервера не получится.

Пробовал,не получилось. Но я решил это гораздо проще, прикрепил кнопку для печати страницы и все работает)

[dark_mc]

Трогать все равно придется так что смысла в отдельном окне нет.

Хорошо, пусть даже сам код изменится, но как сделать замену?

Что за библиотека?

jquery

[dark_mc]

Проще по новой написать чем в таком коде что-то менять.

Полный код не мал и время как бы не позволяет переписать его, возможно вы подскажете все же каким способом можно будет заменить значение вара?

Или такого способа не существует?

[kichSman]

заменить значение вара

в вашем случае только костылями

Полный код не мал и время как бы не позволяет переписать его

Если диплом не зависит от количества символов, то вот как будет выглядеть ваш код (привожу концепцию для экономии вашего времени), вместо вакханалии и с реализацией того, о чем говорил @Rise

<!--Форма - должна быть формой -->
<form id="form">
    <input name="svet" value="0.32300">
    <input name="otop" value="5">
    <input name="musor" value="6">
</form>

var form = document.querySelector('#form'),
    my_calc = {
        price: {
            svet: "0.32300",
            otop: "84.67",
            musor: "26.00"
        },
        load: function () {
            var str = localStorage['my_calc_price'];
            this.price = JSON.parse(str);
            return this;
        },
        set: function(){
            for(var key in this.price){
                form.querySelector('input[name="'+key+'"]')
                    .value = this.price[key];
            }
            return this;
        },
        save: function () {
            localStorage['my_calc_price'] = JSON.stringify(this.price);
            return this;
        }
    };

form.addEventListener('change', function(){
    for(var key in my_calc.price){
        //тут проверка всей формы
        //присвоение значений
        my_calc.price[key] = this[key];
    }
    my_calc.save();
    return false;
});

form.querySelector('input[name="svet"]')
    .addEventListener('change', function(e){
        //проверка одного из поля, например на числовое значение
        if(!this.value || parseFloat(this.value) < 1){
            e.preventDefault();
            return false;
        }
        
    }, false);

my_calc.load().set();

Возможно есть ошибки, не проверял... Гранит науки должен грызться с трудом и потом ))