There are a few bugs on JS, how to do the same on jQuery? Explain who understands well: why are the inp and nameFscrn variables not equal? And how to replace addEventListener with a similar one with jQuery?

 var inp = document.getElementById('name-f-scrn'); var nameFscrn = $('#name-f-scrn'); inp.addEventListener('invalid', function(event){ event.preventDefault(); if (!event.target.validity.valid){ $('.notify').addClass('error').text('Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ²: Имя, Ѐамилия Имя, Ѐамилия Имя ΠžΡ‚Ρ‡Π΅ΡΡ‚Π²ΠΎ'); nameFscrn.addClass('invalid'); } }); inp.addEventListener('input', function(event){ if ($('.notify').css('display') == 'block'){ nameFscrn.removeClass('invalid'); $('.notify').removeClass('error'); } });

And also here in the following code, how to replace the document.getElementById('bcaa-f-scrn').checked line document.getElementById('bcaa-f-scrn').checked for a similar one on JQuery?

 $('#bcaa-f-scrn').change(function(){ if(document.getElementById('bcaa-f-scrn').checked){ bcaaVal = $('#bcaa-quantity').val() * 1; bcaaWeight = $('#bcaa-quantity option:selected').data('weight') * 1; }else{ bcaaVal = 0; bcaaWeight = 0; } });

I will be very grateful!

  • one
    document.getElementById('name-f-scrn') === $('#name-f-scrn')[0] - vp_arth

2 answers 2

These functions can be replaced with on .

 var inp = document.getElementById('name-f-scrn'); var nameFscrn = $('#name-f-scrn'); nameFscrn.on('invalid', function(event) { event.preventDefault(); if (!event.target.validity.valid) { $('.notify').addClass('error').text('Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ²: Имя, Ѐамилия Имя, Ѐамилия Имя ΠžΡ‚Ρ‡Π΅ΡΡ‚Π²ΠΎ'); nameFscrn.addClass('invalid'); } }); nameFscrn.on('input', function() { if($('.notify').css('display') == 'block') { nameFscrn.removeClass('invalid'); $('.notify').removeClass('error'); }; });

It does not display the same thing because document.getElementById displays a specific element, and $('#...') displays a list of elements with that ID. In order to use JS functions for this record, you need to specify the element index: $('#...')[индСкс] or $('#...').get(индСкс) . For ID, index is always 0

All values ​​of type checked recorded and checked through the prop function:

 $('#bcaa-f-scrn').change(function() { if ( $('#bcaa-f-scrn').prop('checked') ) { bcaaVal = $('#bcaa-quantity').val() * 1; bcaaWeight = $('#bcaa-quantity option:selected').data('weight') * 1; } else { bcaaVal = 0; bcaaWeight = 0; } });
  • "$ ('# ...') displays a list of elements with the same ID" - and I would argue))) - Qwertiy ♦
  • @Qwertiy, what's wrong?)) I wrote it down in the console and it gave me a list, as with querySelectorAll - Yuri
  • Well, on the one hand, and on the other - there is one element. If id is unique, then everything is fine, and if not, then oops))) jsfiddle.net/99m1js0z/1 - In chrome 1 4 4 , and some IE said 1 1 4 . But the first is everywhere 1. - Qwertiy ♦
  • @Qwertiy, yes, but in a situation with pure JS ID functions, jsfiddle.net/99m1js0z/2 is mandatory - Yuri
  • First, I didn’t argue about tearing out an element. I quoted a specific phrase. Secondly, I generally disagree: since we have connected jQuery, we need to use it and not pick the dom elements in order to call native methods on them. At least for what is covered by jQuery itself. - Qwertiy ♦
 document.getElementById('bcaa-f-scrn').checked 
 $('#bcaa-f-scrn').prop('checked')
  • one
    Please write more detailed answers :) Your answer is in the queue of checks for substandard answers - Yuri
  • @Yuri, brevity is the sister of talent :) What exactly is not clear in this answer? - Qwertiy ♦
  • Personally, I understand everything. But if a first grader comes in and he doesn’t understand anything, what is this code in the yellow thing, and under it what is this garbage? : D - Yuri
  • based on the question, the answer is clear! I am very grateful for the answer - reFactorPro
  • @reFactorPro, if the issue is resolved, select one of the answers and accept it by clicking on the check mark to the left of it. - Qwertiy ♦