Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сократить код используя цикл? (https://javascript.ru/forum/misc/64931-kak-sokratit-kod-ispolzuya-cikl.html)

mikhael 14.09.2016 12:55
Как сократить код используя цикл?
 
Есть такой код js:
var otvet4 = document.getElementById('edit-submitted-4otvet');
var rez4 = document.getElementById('edit-submitted-4rez');			
otvet4.oninput = function(){					
	if (otvet4.value == 40) {
		rez4.value = 1;
	}
	else{
		rez4.value = 0;
	}
}
				
var otvet5 = document.getElementById('edit-submitted-5otvet');
var rez5 = document.getElementById('edit-submitted-5rez');
otvet5.oninput = function(){
	if (otvet5.value == 25) {
		rez5.value = 1;
	}
	else{
		rez5.value = 0;
	}
}

var otvet6 = document.getElementById('edit-submitted-6otvet');
var rez6 = document.getElementById('edit-submitted-6rez');
otvet6.oninput = function(){
	if (otvet6.value == 45) {
		rez6.value = 1;
	}
	else{
		rez6.value = 0;
	}
}

var otvet7 = document.getElementById('edit-submitted-7otvet');
var rez7 = document.getElementById('edit-submitted-7rez');
otvet7.oninput = function(){
	if (otvet7.value == 310) {
		rez7.value = 1;
	}
	else{
		rez7.value = 0;
	}
}

var otvet8 = document.getElementById('edit-submitted-8otvet');
var rez8 = document.getElementById('edit-submitted-8rez');
otvet8.oninput = function(){
	if (otvet8.value == 70) {
		rez8.value = 1;
	}
	else{
		rez8.value = 0;
	}
}


<form>
<div class="form-item webform-component webform-component-number webform-component--4otvet webform-container-inline form-group form-inline form-item form-item-submitted-4otvet form-type-webform-number form-group"> <label class="control-label" for="edit-submitted-4otvet">Ответ</label>
<input class="form-control form-text form-number" type="text" id="edit-submitted-4otvet" name="submitted[4otvet]" step="1"></div>
<div class="form-item webform-component webform-component-number webform-component--4rez webform-container-inline form-group form-inline form-item form-item-submitted-4rez form-type-webform-number form-group"> <label class="control-label" for="edit-submitted-4rez">4rez</label>
<input class="form-control form-text form-number" type="text" id="edit-submitted-4rez" name="submitted[4rez]" value="0" step="1"></div>
..........
<div class="form-item webform-component webform-component-number webform-component--8otvet webform-container-inline form-group form-inline form-item form-item-submitted-8otvet form-type-webform-number form-group"> <label class="control-label" for="edit-submitted-8otvet">Ответ</label>
<input class="form-control form-text form-number" type="text" id="edit-submitted-8otvet" name="submitted[8otvet]" step="1"></div>
<div class="form-item webform-component webform-component-number webform-component--8rez webform-container-inline form-group form-inline form-item form-item-submitted-8rez form-type-webform-number form-group"> <label class="control-label" for="edit-submitted-8rez">8rez</label>
<input class="form-control form-text form-number" type="text" id="edit-submitted-8rez" name="submitted[8rez]" value="0" step="1"></div>
</form>

Смысл кода в том, что есть поля input расположены по парно, если введенное значение соответствует нужному, то в другом поле ставить 1, если не правильно то 0.

рони 14.09.2016 13:18
mikhael,
для медитации, ввести 40 в 1 инпут
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    var b = document.querySelectorAll(".form-control.form-text.form-number");
    [40, 25, 45, 310, 70].forEach(function(c, a) {
        a *= 2;
        b[a] && b[a].addEventListener("input", function() {
            b[a + 1].value = +(this.value == c)
        })
    })
});
  </script>
</head>

<body>

<input class="form-control form-text form-number" type="text" id="edit-submitted-4otvet" name="submitted[4otvet]" step="1">
<input class="form-control form-text form-number" type="text" id="edit-submitted-4rez" name="submitted[4rez]" value="0" step="1">


</body>
</html>

mikhael 14.09.2016 14:31
Здравствуйте, Рони.
Наверное, я не совсем точно дал описание, думаю теперь понятнее.

рони 14.09.2016 14:45
Цитата:
Сообщение от mikhael
Наверное, я не совсем точно дал описание, думаю теперь понятнее.
и что это меняет?

рони 14.09.2016 14:47
mikhael,
впишите нужные значения в массив и всё

mikhael 14.09.2016 15:05
Что-то не работает :no:

рони 14.09.2016 15:07
mikhael,
где код?

mikhael 14.09.2016 15:11 
window.addEventListener("DOMContentLoaded", function() {
				var b = document.querySelectorAll(".form-control.form-text.form-number");
				[40, 25, 45, 310, 70].forEach(function(c, a) {
					a *= 2;
					b[a] && b[a].addEventListener("input", function() {
						b[a + 1].value = +(this.value == c);

					})
				})
			});

вот этот код в отдельном файле

mikhael 14.09.2016 15:14
пробовал через перебор свойств for..in, что-то не получилось

рони 14.09.2016 15:24
Цитата:
Сообщение от mikhael
вот этот код в отдельном файле
попробуйте убрать строки 1 и 10 -- одному вам известно как вы его запускаите.
если код здесь работает, то и у вас будет работать!!! либо у вас всё иначе, чем в 1 посте

mikhael 14.09.2016 16:07
А можно тоже самое реализовать с помощью id элемента.
А то получается, что перед 
<input class="form-control form-text form-number" type="text" id="edit-submitted-4otvet" name="submitted[4otvet]" step="1">
есть еще несколько input

рони 14.09.2016 16:13
mikhael,
var b = document.querySelectorAll("[id^=edit-submitted]");

mikhael 14.09.2016 16:38
т.е. чтоб было однозначно в коде с каким из input происходит манипуляция.
edit-submitted-4otvet -> 40
edit-submitted-5otvet -> 25
и т.д.

рони 14.09.2016 16:46
mikhael,
в коде и так однозначно -- массив сам по себе не изменится -- первое значение для первой пары и тд

mikhael 14.09.2016 16:56
В том то и дело, что в html коде 
<input class="form-control form-text form-number" type="text" id="edit-submitted-4otvet" name="submitted[4otvet]" step="1">
это не первый input, он может быть и 5 и 10.

рони 14.09.2016 18:10
Цитата:
Сообщение от mikhael
это не первый input, он может быть и 5 и 10.
какая разница .... :( :( :( 

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    [{id : 4, r : 40},{id : 8, r : 25}].forEach(function(c) {
        var b = document.querySelector("[id=edit-submitted-"+c.id+"otvet]"),
            a = document.querySelector("[id=edit-submitted-"+c.id+"rez]");
        b.addEventListener("input", function() {
           a.value = +(this.value == c.r)
        })
    })
});
  </script>
</head>

<body>

<form>
<div class="form-item webform-component webform-component-number webform-component--4otvet webform-container-inline form-group form-inline form-item form-item-submitted-4otvet form-type-webform-number form-group"> <label class="control-label" for="edit-submitted-4otvet">Ответ</label>
<input class="form-control form-text form-number" type="text" id="edit-submitted-4otvet" name="submitted[4otvet]" step="1"></div>
<div class="form-item webform-component webform-component-number webform-component--4rez webform-container-inline form-group form-inline form-item form-item-submitted-4rez form-type-webform-number form-group"> <label class="control-label" for="edit-submitted-4rez">4rez</label>
<input class="form-control form-text form-number" type="text" id="edit-submitted-4rez" name="submitted[4rez]" value="0" step="1"></div>
..........
<div class="form-item webform-component webform-component-number webform-component--8otvet webform-container-inline form-group form-inline form-item form-item-submitted-8otvet form-type-webform-number form-group"> <label class="control-label" for="edit-submitted-8otvet">Ответ</label>
<input class="form-control form-text form-number" type="text" id="edit-submitted-8otvet" name="submitted[8otvet]" step="1"></div>
<div class="form-item webform-component webform-component-number webform-component--8rez webform-container-inline form-group form-inline form-item form-item-submitted-8rez form-type-webform-number form-group"> <label class="control-label" for="edit-submitted-8rez">8rez</label>
<input class="form-control form-text form-number" type="text" id="edit-submitted-8rez" name="submitted[8rez]" value="0" step="1"></div>
</form>



</body>
</html>

mikhael 14.09.2016 18:48
Благодарю, все работает.


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