1

I have input fields that change to buttons when a word is correct. I however now want my timer to stop when there is no existing input field anymore. How would this be done? This is how I START the timer:

$(document).one('keydown', '.syl-input', function(){
T.start();
});

Now: I would like to create a check to see whether this input field still exists or not: 

var sylInput = $('<input/>', {
 'type': 'text',
 'class': 'form-control syl-input',
 'name':  +c++,
 'id': +idsyll++
  })

if it doesn't exist anymore, it should stop the timer T.stop(), but as long as there are input fields it should not fire. I did found something related to what I want, but it's not entirely what I want --> Is there an "exists" function for jQuery?.

I had the next thing in mind (based on the link above) 

if ('.syl-input' === 0) {
T.stop();
}

but I assume there should be an each loop before I can create this if statement?

To show you the complete code where my input field is in (maybe that will be a gamechanger)?

$.map(exercise.syllables, function (syllable, j) { 
if (!syllable || !syllable.trim().length) {
// If it doesn't exist or is an empty string, return early without creating/appending elements
return;
}

var innerSylCol = $('<div/>', {
class: 'col-md-3 inputSyllables'
});

var sylInput = $('<input/>', {
'type': 'text',
'class': 'form-control syl-input',
'name':  +c++,
'id': +idsyll++
 }).on('blur', function() {
 var cValue = $(this).val();

if(cValue === "") {
   return;
}

if (cValue === syllable) {
correctSylls.push(cValue);
console.log(correctSylls);
}

if (exercise.syllables.length === correctSylls.length) {
$(this).closest('.syll-row').find('input.syl-input').each(function () { 
$(this).replaceWith(getCorrectBtn($(this).val()))
});

S.addRight();
S.playRight();

} else if (cValue !== syllable){
 // $(this).css({'color':'#e00413'});
  S.playWrong();
  S.addWrong();
 }
});

 innerSylCol.append(sylInput);
sylRow.append(innerSylCol);
});
 idsyll = 0;

 sylCol.append(sylRow);

 exer.append(colLeft, sylCol);

  exerciseArea.append(exer);
 });
return exerciseArea;
}

1 Answers1

0

You're on the right track. You simply need change it to a jQuery selector, like this

$('.syl-input')

and check the length property of the returned object, like this

if ( $('.syl-input').length ) {
    T.stop();
}

As noted in the answer you referenced, JavaScript values are truthy, meaning you can use them in IF statements in control flow.

dafoxuk
  • 439
  • 3
  • 8
  • Oke, but where should the if statement be placed? Or doesn't this matter? –  Jul 11 '18 at 11:47
  • @JJShaw A good place might be after you have changed an input into a button (presumably an event listener callback you are using), you insert the if statement to check if there are any inputs remaining – dafoxuk Jul 11 '18 at 12:07
  • But doesn't .length check whether it can find something WITHIN the input field instead of checking if there are any input fields/ –  Jul 11 '18 at 12:14
  • Thanks man! I indeed had to place it after the change of input. I kept on putting it ouside of the loop. –  Jul 11 '18 at 12:15
  • Glad it worked! Length is a property of any JS object. In the case of jQuery, it's like you are running a search and 'length' will tell you if the search came back with any results (i.e. elements in the DOM) – dafoxuk Jul 11 '18 at 12:21