Categories
JavaScript Answers

How to Detect if a User is Scrolling with JavaScript?

To detect if a user is scrolling with JavaScript, we can watch for scroll events by adding event handlers.

For instance, we can write:

let userHasScrolled = false;  
window.onscroll = (e) => {  
  userHasScrolled = true;  
}

to add the userHasScrolled variable.

Then we set the window.onscroll property to a function that runs when we scroll.

Also, we can use the addEventListener method to add the scroll event listener.

For instance, we can write:

let userHasScrolled = false;  
window.addEventListener('scroll', (e) => {  
  userHasScrolled = true;  
})

We call window.addEventListener with 'scroll' to listen to the scroll event.

The 2nd argument is the event handler that’s run when the scroll event is emitted when we scroll.

Categories
JavaScript Answers

How to Run Code After jQuery Ajax Calls Regardless of the Result?

To run code after jQuery Ajax calls regardless of the result, we can call the always method.

For instance, we can write:

$.ajax({  
  url: 'https://yesno.wtf/api',  
  dataType: 'json',  
  type: 'GET'  
}).then((processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) => {  
  console.log('success')  
}).always(() => {  
  console.log("always run");  
});

We call ajax with an object that has the url of the request.

dataType is set to 'json' to make a JSON request.

type is set to 'GET' to make a GET request.

Then we call then with a callback to get the response of the request when it’s successful.

And then we call always with a callback that runs regardless of the request result.

Categories
JavaScript Answers

How to Declare a JavaScript Array with Objects Inside?

To declare a JavaScript array with objects inside, we can declare an empty array then use a loop to push the objects into an array.

For instance, we can write:

const n = 100;
const sample = [];
for (let i = 0; i < n; i++) {
  sample.push({});
}

to declare the sample array.

Then we use a for loop to loop from 0 to n and in the loop body, we call sample.push with an empty object to add an empty object into an array n times.

Categories
JavaScript Answers

How to Do a Case Insensitive Replace All with a JavaScript String?

Sometimes, we want to do a Case insensitive replace all with JavaScript string.

In this article, we’ll look at how to do a Case insensitive replace all with JavaScript string.

Do a Case Insensitive Replace All with a JavaScript String

To do a Case insensitive replace all with JavaScript string, we can use a regex to do the replacement.

For instance, we can write:

const str = 'This iS IIS'.replace(/is/ig, 'as');  
console.log(str)

We call replace on a string with the i and g flags to search for all instances of 'is' in a case insensitive manner.

And we replace each instance with 'as' .

The i flag lets us search for all instances of the pattern in a case-insensitive manner.

The g flag lets us search for all instances of the regex pattern.

As a result, str is 'Thas as Ias’ .

Conclusion

To do a Case insensitive replace all with JavaScript string, we can use a regex to do the replacement.

Categories
HTML

How to Toggle an HTML Radio Button by Clicking its Label?

Sometimes, we want to toggle an HTML radio button by clicking its label.

In this article, we’ll look at how to toggle an HTML radio button by clicking its label.

Toggle an HTML Radio Button by Clicking its Label with JavaScript

To toggle an HTML radio button by clicking its label with JavaScript, we should put the radio button and the radio button text in the label element.

For instance, we can write:

<label>  
  <input type="radio" name="mode" value="create">  
  <i>create table</i>  
</label>

We put the input and i element with the label text so that when we click on the text, the radio button will be selected.

Conclusion

To toggle an HTML radio button by clicking its label with JavaScript, we should put the radio button and the radio button text in the label element.