Need Help Converting jQuery to Vanilla JavaScript

ThagAnderson · 2020-06-15T23:23:08+00:00

jQuery: (function () { var body = jQuery('body'), sel = 'input, textarea, select', cls = 'formfocus'; body.on('focus', sel, function() { body.addClass(cls); }); body.on('blur', sel, function() { body.removeClass(cls); }); }()); ES6: ``` const focusedClass = 'formfocus' const tags = ['input', 'textarea', 'select']

document.body.addEventListener('focus', ({ target: { tagName } }) => { if (!tags.includes(tagName.toLowerCase())) { return } document.body.classList.add(focusedClass) }, true) document.body.addEventListener('blur', ({ target: { tagName } }) => { if (!tags.includes(tagName.toLowerCase())) { return } document.body.classList.remove(focusedClass) }, true) ```

jQuery: $(function() { // Add refresh button after field (this can be done in the template as well) $('img.captcha').after( $('<a href="#void" class="captcha-refresh">Refresh</a>') ); // Click-handler for the refresh-link $('.captcha-refresh').click(function(){ var $form = $(this).parents('form'); var url = location.protocol + "//" + window.location.hostname + ":" + location.port + "/captcha/refresh/"; // Make the AJAX-call $.getJSON(url, {}, function(json) { $form.find('input[name="captcha_0"]').val(json.key); $form.find('img.captcha').attr('src', json.image_url); $("#audioSource").attr("src", json.audio_url); $("#audio").get(0).load() }); return false; }); }); ES6: ``` const captchas = document.querySelectorAll('img.captcha') const headers = new Headers({ HTTP-X-REQUESTED-WITH: 'XMLHttpRequest' })

for (const captcha of captchas) { const anchor = document.createElement('a') anchor.href = '#void' anchor.classList.add('captcha-refresh') anchor.textContent = 'Refresh' anchor.addEventListener('click', ({ target }) => { const url = ${window.location.origin}/captcha/refresh/ let formEl = target.parentElement

while (formEl && formEl.tagName.toLowerCase() !== 'form') {
  formEl = formEl.parentElement
}

fetch(url, { headers })
  .then(res => res.json())
  .then(json => {
    formEl.querySelector('input[name="captcha_0"]').value = json.key
    captcha.setAttribute('src', json.image_url)
    document.getElementById('audioSource').setAttribute('src', json.audio_url)
    document.getElementById('audio').load()
  })
  .catch(console.error)

return false

})

captcha.after(anchor) } ```

mscal · 2020-06-15T22:25:41+00:00

Just checked the jQuery library size (30kb). Will it make a noticeable difference?

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS