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

[biryukovm]

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



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>

[laimas]

Лучше подумайте как это использовать (https://css-tricks.com/examples/StarRating/). Источник отсюда (http://fontawesome.io/examples/).

[biryukovm]

Это у меня уже есть и оно работает нормально без збоев.
Я же пишу мне надо переменные не терять.
Есть конечно как вариант записывать их в 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);

[laimas]

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

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

[biryukovm]

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

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

[laimas]

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

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

[laimas]

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]

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

[рони]

Неужеди никто подсказать не может ?
в чём проблема-то?

[laimas]

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

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

[biryukovm]

Конечно

[biryukovm]

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

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

[laimas]

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

<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>