Błąd JS, tylko pierwsze wykonanie skryptu działa poprawnie

Question

Witajcie forumowicze

mam mały problem i proszę o pomoc bo czegoś nie rozumiem

mam 2 input'y type text

chce podpiąć ręczny skaner i gdy zeskanuje 2 identyczne KODY QR chce mieć informację czy jest OK/NOK

gdy załaduje się pierwszy raz strona działa dobrze, z każdym kolejnym skanowaniem zawsze mam odpowiedź OK, mimo że kody w inputach są różne, czy są takie same, zawsze jest OK

ma ktoś jakiś pomysł VIDEO YT

$( '#id-1' ).change(function() {
		$("#id-2").focus();
		$("#id-2").change(function() {
			var t1 = $('#id-1').val();
			var t2 = $('#id-2').val();
			if(t1 === t2){
				$(".show-info").css({"color":"#06f906"}).text("OK");
				$('#id-1').val("");
				$('#id-2').val("");
				$("#id-1").focus();
			}else if(t1 != t2){
				$(".show-info").css({"color":"red"}).text("NOK");
				$('#id-1').val("");
				$('#id-2').val("");
				$("#id-1").focus();
			}else{
				$(".show-info").css({"color":"red"}).text("BLĄD");
			}
		});


		
});

 

Answer 1

Obstawiam, że problem tkwi w podpinaniu $("#id-2").change() wewnątrz .change() dla pierwszego inputa. Za każdym kolejnym przejściem następuje duplikacja change event handlera dla drugiego inputa, gdzie warunek t1 != t2 jest spełniany (wtedy prawidłowo pokazuje "NOK"). To powoduje, że oba inputy są programowalnie czyszczone przez

$('#id-1').val("");
$('#id-2').val("");

i już kolejny przebieg event handlera widzi oba inputy jako puste, dzięki czemu warunek t1 === t2 jest spełniany, przez co już cały czas wyświetla się "OK".

Przenieś $("#id-2").change() poza $("#id-1").change().

Comments

Przed sekundą udało mi się chyba rozwiązać problem

$(document).off('change','#id-1').on('change','#id-1',function(){
		$("#id-2").focus();
		$(document).off('change','#id-2').on('change','#id-2',function(){
			var t1 = $('#id-1').val();
			var t2 = $('#id-2').val();
			if(t1 === t2){
				$(".show-info").css({"color":"#06f906"}).text("OK");
				$('#id-1').val("");
				$('#id-2').val("");
				$("#id-1").focus();
			}else{
				$(".show-info").css({"color":"red"}).text("NOK");
				$('#id-1').val("");
				$('#id-2').val("");
				$("#id-1").focus();
			}
		});

});

Dodałem

.off('change','#id-2')

$(document).off('change','#id-2').on('change','#id-2',function(){}

Ale rozwiązanie które opisałeś również działa

$(document).on('change','#id-1',function(){
		$("#id-2").focus();
});

$(document).on('change','#id-2',function(){
			var t1 = $('#id-1').val();
			var t2 = $('#id-2').val();
			if(t1 === t2){
				$(".show-info").css({"color":"#06f906"}).text("OK");
				$('#id-1').val("");
				$('#id-2').val("");
				$("#id-1").focus();
			}else{
				$(".show-info").css({"color":"red"}).text("NOK");
				$('#id-1').val("");
				$('#id-2').val("");
				$("#id-1").focus();
			}
		});

Dziękuję

---

$(document).off('change','#id-2').on('change','#id-2',function(){

IMO odpinanie event handlera, po to aby zaraz się do niego podpiąć, w takiej sytuacji jest mniej czytelne i nie przynosi korzyści.

---

Zastosowałem twoje rozwiązanie, jest lepsze tak jak napisałeś, dzisiaj przetestowałem, działa wyśmienicie :) Dzięki jeszcze raz!

---

@neo1020, dla pewności bym dodał trim(), kod można skrócić 

$(document).on('change','#id-1',function(){
  $('#id-2').focus();
  $('.show-info').text('');
});
 
$(document).on('change','#id-2',function(){
  const t1 = $('#id-1').val().trim();
  const t2 = $('#id-2').val().trim();
 
  if(t1 === t2)
    $('.show-info').css({'color':'#06f906'}).text('OK');
  else
    $('.show-info').css({'color':'red'}).text('NOK');
 
  $('#id-1').val('');
  $('#id-2').val('');
  $('#id-1').focus();
});

 

---

@VBService to forum naprawdę jest dla Ciebie, sprawdziłem działa extra a mało tego widzę że JS z 1 warunkiem działa bez nawiasów ? JAK ? (nie wiedziałem o tym, bo z Audio już mi nie działało ;/ ) i dodatkowo po powrocie do input'a pierwszego czyści się .show-info, to jest dobre

ale poddałem to małej modyfikacji z dźwiękiem :))

edit://

a i co to skrócenia dodałem jeszcze () => 

$(document).on('change','#id-1',() => {
  $('#id-2').focus();
  $('.show-info').text('');
});
  
$(document).on('change','#id-2',() => {
  const t1 = $('#id-1').val().trim();
  const t2 = $('#id-2').val().trim();
  
  if(t1 === t2){
    $('.show-info').css({'color':'#06f906'}).text('OK');
	var audio = new Audio('../../../sound/good-1.wav');
	audio.play();
  }else{
    $('.show-info').css({'color':'red'}).text('NOK');
	var audio = new Audio('../../../sound/bad-1.wav');
	audio.play();
  }
  
  $('#id-1').val('');
  $('#id-2').val('');
  $('#id-1').focus();
});

https://youtu.be/7dA_zcHCURs

Dziękuję

---

bez nawiasów działa tylko jak jest jedna linia kodu do wykonania

let output = [];

for (let i=0; i<10; i++)
  output.push(i); // jedna linia dla for

console.log(output);
output = [];

for (let i=0; i<10; i++)
  if (i % 2 == 0)   // jedna linia kodu dla for
    output.push(i); // jedna linia kodu dla if-a

console.info(output);
output = [];

for (let i=0; i<10; i++)
  if (i % 2 == 0) // jedna linia kodu dla for
    if (i > 4)    // jedna linia kodu dla if-a
      output.push(i); // jedna linia kodu dla kolejnego if-a

console.log(output);

 

i dodatkowo po powrocie do input'a pierwszego czyści się .show-info, to jest dobre

nie po powrocie, tylko jak zmieni się wartość w input-cie pierwszym (zdarzenie change)

po powrocie to by było zdarzenie focus.

 

---

Funkcję strzałkową jak nie przyjmuje, żadnych argumentów można zapisać tak

const button = document.createElement('button');
button.textContent = 'Lorem';
document.body.appendChild(button);
button.onclick = _=> { console.log('klik'); };

 

Przykład ze zdarzeniem focus

<input id="id-1">
<input id="id-2">
<div class="show-info"></div>

input[id^="id-"] {
  display: block;
  margin: 1.5em 1em;
  outline: none;
  border-style: solid;
  border-width: 2px;
  transition: transform 250ms;
}

$('#id-1, #id-2').on('focus', function() {
  $(this).css({'border-color':'red', 'transform':'scale(1.2)'});
});
$('#id-1, #id-2').on('blur', function() {
  $(this).css({'border-color':'black', 'transform':'scale(1)'});
});

$('#id-1').on('change', _=> {
  $('#id-2').focus();
  $('.show-info').text('');
});

const audio = {
  ok: new Audio('https://www.google.com/speech-api/v2/synthesize?enc=mpeg&client=chromium&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw&text=s%C4%85%20takie%20same&lang=pl-PL&speed=0.5&pitch=0.5'),
  nok: new Audio('https://www.google.com/speech-api/v2/synthesize?enc=mpeg&client=chromium&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw&text=nie%20s%C4%85%20takie%20same&lang=pl-PL&speed=0.5&pitch=0.5')
}

$('#id-2').on('change', () => {
  const t1 = $('#id-1').val().trim();
  const t2 = $('#id-2').val().trim();

  if(t1 === t2){
    $('.show-info').css({'color':'#06f906'}).text('OK');
    audio.ok.play();
  }else{
    $('.show-info').css({'color':'red'}).text('NOK');
    audio.nok.play();
  }

  $('#id-1').val('');
  $('#id-2').val('');
  $('#id-1').focus();
});

 

Sample głosowe przygotowane na stronie: https://voicegenerator.io/