Javascript-форум - Теряю переменную при функции

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Теряю переменную при функции (https://javascript.ru/forum/dom-window/67995-teryayu-peremennuyu-pri-funkcii.html)

Теряю переменную при функции

Привет всем.
У меня по коду идете рейтинг по звездочкам и надо фиксировать несколько параметров,но при каждом вызове я теряю одну из переменных.
Подскажите как не терять переменную в функции, вот мой код.

function textzaloba(tip,num) {
    
        document.getElementById(tip+'1_zvezda').classList.remove("fa-star-o","fa-star");
        document.getElementById(tip+'2_zvezda').classList.remove("fa-star-o","fa-star");
        document.getElementById(tip+'3_zvezda').classList.remove("fa-star-o","fa-star");
        document.getElementById(tip+'4_zvezda').classList.remove("fa-star-o","fa-star");
        document.getElementById(tip+'5_zvezda').classList.remove("fa-star-o","fa-star");
        
        if (num==1){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star-o");
        }
        if (num==2){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star-o");
        }
        if (num==3){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star-o");
    
        }
        if (num==4){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star-o");
        }
        if (num==5){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star");
        }
    if (tip=='servis' && num>0){var  num_servis = num;}
    if (tip=='kachestvo' && num>0){var  num_kachestvo = num;}
    alert(num_servis+' '+num_kachestvo);

}

<label>Оценить сервис:</label>
<div class="text-center">
<input id="servis1" name="servis" value="1" type="radio" />
<input id="servis2" name="servis" value="2" type="radio" />
<input id="servis3" name="servis" value="3" type="radio" />
<input id="servis4" name="servis" value="4" type="radio" />
<input id="servis5" name="servis" value="5" type="radio" />
<label onclick="textzaloba('servis','1')" for="servis1" class="btn btn-default"><i id="servis1_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('servis','2')" for="servis2" class="btn btn-default"><i id="servis2_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('servis','3')" for="servis3" class="btn btn-default"><i id="servis3_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('servis','4')" for="servis4" class="btn btn-default"><i id="servis4_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('servis','5')" for="servis5" class="btn btn-default"><i id="servis5_zvezda" class="fa fa-star-o text-yellow"></i></label>
</div>

<label>Оценить качество:</label>
<div class="text-center">
<input id="kachestvo1" name="kachestvo" value="1" type="radio" />
<input id="kachestvo2" name="kachestvo" value="2" type="radio" />
<input id="kachestvo3" name="kachestvo" value="3" type="radio" />
<input id="kachestvo4" name="kachestvo" value="4" type="radio" />
<input id="kachestvo5" name="kachestvo" value="5" type="radio" />
<label onclick="textzaloba('kachestvo','1')" for="kachestvo1" class="btn btn-default"><i id="kachestvo1_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('kachestvo','2')" for="kachestvo2" class="btn btn-default"><i id="kachestvo2_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('kachestvo','3')" for="kachestvo3" class="btn btn-default"><i id="kachestvo3_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('kachestvo','4')" for="kachestvo4" class="btn btn-default"><i id="kachestvo4_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('kachestvo','5')" for="kachestvo5" class="btn btn-default"><i id="kachestvo5_zvezda" class="fa fa-star-o text-yellow"></i></label>
</div>

Лучше подумайте как это использовать. Источник отсюда.

Это у меня уже есть и оно работает нормально без збоев.
Я же пишу мне надо переменные не терять.
Есть конечно как вариант записывать их в HTML код а потом постоянно считывать отуда но я думаю это как то не по уму есть наверное более умные способы

biryukovm,

var  num_servis = num_kachestvo ="";
    if (tip=='servis' && num>0){num_servis = num;}
    if (tip=='kachestvo' && num>0){num_kachestvo = num;}
    alert(num_servis+' '+num_kachestvo);

Цитата:

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

Я же пишу мне надо переменные не терять.

А что значит терять, ведь предлагается оценить сервис, а значит то "что есть" при наведении мыши отражает выбор, а щелчок по позиции выбранной, это выбор радио кнопки, а выбор должен хранить сервер. Или не так? Как же что-то может потеряться?

Цитата:

Сообщение от laimas (Сообщение 447848)

Необходимо если он в какомто из рейтингов указал ниже 3х то клиент должен написать причину, если больше значит притензий нет и писать не надо

Цитата:

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

клиент должен написать причину

Ясно, то есть выбор оценки еще не есть отправление формы.

biryukovm,
лучше делегировать обработку, это сократит код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
@font-face {
  font-family: 'FontAwesome';
  src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input {
    display: none;
}
.text-center {
    direction: rtl;
    text-align: left;
    color: #D9A41D;
    font-size: 22px;
    cursor: pointer;
}
.text-center > label:before {
    content: "\f006";
}
.text-center > .fa-star:before,
.text-center > label:hover:before,
.text-center > label:hover ~ label:before {
   content: "\f005";
}
</style> 
<script> 
function setRate(e) {
    var o = e.target || e.srcElement;
    if(o.tagName=="INPUT") {
        [].slice.call(o.parentNode.querySelectorAll('label')).reverse().forEach(function(e, i) {
            if(o.value > i) e.classList.add('fa-star');
            else e.classList.remove('fa-star');
        })
    }
}
</script> 
</head>
<body>
<label>Оценить сервис:</label>
<div class="text-center" onclick="setRate(event)">
<input id="s1" name="service" value="1" type="radio" />
<input id="s2" name="service" value="2" type="radio" />
<input id="s3" name="service" value="3" type="radio" />
<input id="s4" name="service" value="4" type="radio" />
<input id="s5" name="service" value="5" type="radio" />
<label for="s5" class="fa btn btn-default"></label>
<label for="s4" class="fa btn btn-default"></label>
<label for="s3" class="fa btn btn-default"></label>
<label for="s2" class="fa btn btn-default"></label>
<label for="s1" class="fa btn btn-default"></label>
</div>

<label>Оценить качество:</label>
<div class="text-center" onclick="setRate(event)">
<input id="q1" name="quality" value="1" type="radio" />
<input id="q2" name="quality" value="2" type="radio" />
<input id="q3" name="quality" value="3" type="radio" />
<input id="q4" name="quality" value="4" type="radio" />
<input id="q5" name="quality" value="5" type="radio" />
<label for="q5" class="fa btn btn-default"></label>
<label for="q4" class="fa btn btn-default"></label>
<label for="q3" class="fa btn btn-default"></label>
<label for="q2" class="fa btn btn-default"></label>
<label for="q1" class="fa btn btn-default"></label>
</div>
</body>
</html>

Неужеди никто подсказать не может ?

Цитата:

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

Неужеди никто подсказать не может ?

в чём проблема-то?

Цитата:

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

Неужеди никто подсказать не может

А оценки, это обязательные условия?

Видимо меня не правильно поняли, стили на звездочках сохраняются как и параметр radio checked
У меня это все работает, но мне нужно знать следующее
если он укажить хоть один из рейтинга ниже 3 звезд то должен появиться <textarea></textarea> и туда описать причину недовольства.
А у меня проблема такая что рейтинг работает а вот отпределить все парарметры где рейтинг ниже 3х не могу,
Можно конечно считывать и так
$("input:radio[name=option]:checked").val()
но оно работает только после нескольких нажатий

А мне нужно знать значение всех рейтингов которые будут и потом определять есть ли в одном их них меньше 3

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
@font-face {
  font-family: 'FontAwesome';
  src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input, #cause {
    display: none;
}
.text-center {
    direction: rtl;
    text-align: left;
    color: #D9A41D;
    font-size: 22px;
    cursor: pointer;
}
.text-center > label:before {
    content: "\f006";
}
.text-center > .fa-star:before,
.text-center > label:hover:before,
.text-center > label:hover ~ label:before {
   content: "\f005";
}
</style> 
<script> 
function setRate(e) {
    var a = e.target || e.srcElement, b = document.querySelector('#cause'), c = b.querySelector('textarea');
    if(a.tagName=="INPUT") {
        [].slice.call(a.parentNode.querySelectorAll('label')).reverse().forEach(function(e, i) {
            a.value > i ? e.classList.add('fa-star') : e.classList.remove('fa-star');
        });
        if(a.value < 3 || document.querySelector('input:not([name='+a.name+']):checked').value < 3) {
            b.style.display = 'block';
            c.name = b.id;
            c.required = true;
        } else {
            b.style.display = 'none';
            c.name = '';
            c.required = false;
        }
    }
}
</script> 
</head>
<form autocomplete="off">
<body>
<label>Оценить сервис:</label>
<div class="text-center" onclick="setRate(event)">
<input id="s1" name="service" value="1" type="radio" />
<input id="s2" name="service" value="2" type="radio" />
<input id="s3" name="service" value="3" type="radio" checked="" />
<input id="s4" name="service" value="4" type="radio" />
<input id="s5" name="service" value="5" type="radio" />
<label for="s5" class="fa btn btn-default"></label>
<label for="s4" class="fa btn btn-default"></label>
<label for="s3" class="fa fa-star btn btn-default"></label>
<label for="s2" class="fa fa-star btn btn-default"></label>
<label for="s1" class="fa fa-star btn btn-default"></label>
</div>

<label>Оценить качество:</label>
<div class="text-center" onclick="setRate(event)">
<input id="q1" name="quality" value="1" type="radio" />
<input id="q2" name="quality" value="2" type="radio" />
<input id="q3" name="quality" value="3" type="radio" checked="" />
<input id="q4" name="quality" value="4" type="radio" />
<input id="q5" name="quality" value="5" type="radio" />
<label for="q5" class="fa btn btn-default"></label>
<label for="q4" class="fa btn btn-default"></label>
<label for="q3" class="fa fa-star btn btn-default"></label>
<label for="q2" class="fa fa-star btn btn-default"></label>
<label for="q1" class="fa fa-star btn btn-default"></label>
</div>

<div id="cause">
<label>Причина:</label><br />
<textarea></textarea>
</div>
</form>
</body>
</html>