Category: JavaScript

Sometimes, we want to disable an HTML button after one click with JavaScript.

In this article, we’ll look at how to disable an HTML button after one click with JavaScript.

Disable an HTML Button After One Click with JavaScript

To disable an HTML button after one click with JavaScript, we can call the jQuery one method on an element to attach an event handler that emits once only.

We can also call addEventListener with the once option set to true if we want to use plain JavaScript.

For instance, we can write:

<button>  
  click me  
</button>

to add a button.

Then we call one by writing:

$('button').one('click', () => {  
  $('button').attr('disabled', 'disabled');  
});

We call one with 'click' to listen to the click event on the button once.

The callback sets the disabled attribute of the button to true .

We can do the same thing with plain JavaScript by writing:

const button = document.querySelector('button');  
button.addEventListener("click", () => {  
  button.setAttribute('disabled', 'disabled')  
}, {  
  once: true  
});

We get the button with document.querySelector .

Then we call addEventListener on the button with 'click' to add a click listener to it.

And we call setAttribute to set the disabled attribute value in the callback.

In the 3rd argument, we set once to true to make the event only emit once.

Conclusion

To disable an HTML button after one click with JavaScript, we can call the jQuery one method on an element to attach an event handler that emits once only.

We can also call addEventListener with the once option set to true if we want to use plain JavaScript.

Sometimes, we want to set a dropdown’s selected item based on option text with JavaScript.

In this article, we’ll look at how to set a dropdown’s selected item based on option text with JavaScript.

Set a Dropdown’s Selected Item Based on Option Text with JavaScript

To set a dropdown’s selected item based on option text with JavaScript, we search for the index of the option text in the dropdown.

Then we can set the selectedIndex of the select drop down to the returned index.

For instance, we write:

<select>
  <option value='yahoo'>Yahoo</option>
  <option value='bing'>Bing</option>
  <option value='google'>Google</option>
</select>

to create a drop-down with some options.

Then we write:

const textToFind = 'Google';
const dd = document.querySelector('select');
dd.selectedIndex = [...dd.options].findIndex(option => option.text === textToFind);

to set textToFind to the text we want to find.

Then we select the drop-down with document.querySelector .

Next, we spread the dd.options which has the option elements in the select drop down into an array.

Then we call findIndex to find the index of the option element that has the textToFind as the text, which is the content between the opening and closing tags.

Finally, we set the returned index as the value of dd.selectedIndex .

Therefore, we should see 'Google' selected as a result.

Conclusion

To set a dropdown’s selected item based on option text with JavaScript, we search for the index of the option text in the dropdown.

Then we can set the selectedIndex of the select drop down to the returned index.

Sometimes, we want to display a loading bar before the entire page is loaded with JavaScript.

In this article, we’ll look at how to display a loading bar before the entire page is loaded with JavaScript.

Display a Loading Bar Before the Entire Page is Loaded with JavaScript

To display a loading bar before the entire page is loaded with JavaScript, we can watch for the load event with jQuery.

When the load event is emitted, we remove the loading indicator from the screen.

To do this, we write:

<div id="overlay">  
  <img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" alt="Loading" />  
  Loading...  
</div>

to add the loading indicator.

Then we write:

$(window).on('load', () => {  
  $('#overlay').fadeOut();  
});

to watch the load event with the on method.

Then we call fadeOut on the div to remove it from the screen with a fade-out effect.

Conclusion

To display a loading bar before the entire page is loaded with JavaScript, we can watch for the load event with jQuery.

When the load event is emitted, we remove the loading indicator from the screen.

Sometimes, we want to use the JavaScript spread operator to concatenate multiple arrays.

In this article, we’ll look at how to use the JavaScript spread operator to concatenate multiple arrays.

Use the JavaScript Spread Operator to Concatenate Multiple Arrays

To use the JavaScript spread operator to concatenate multiple arrays, we just spread all the entries from the existing arrays to a new array.

For instance, we write:

const fruits = ["apples", "bananas", "pears"];
const vegetables = ["corn", "potatoes", "carrots"];
const produce = [...fruits, ...vegetables];
console.log(produce);

to spread all the fruits and vegetables array entries to the produce array.

Therefore, produce is:

["apples", "bananas", "pears", "corn", "potatoes", "carrots"]

Conclusion

To use the JavaScript spread operator to concatenate multiple arrays, we just spread all the entries from the existing arrays to a new array.

Sometimes, we want to test if a date is today, yesterday, within a week or two weeks ago with moment.js

In this article, we’ll look at how to test if a date is today, yesterday, within a week or two weeks ago with moment.js.

Test if a Date is Today, Yesterday, within a Week or Two Weeks Ago with Moment.js

To test if a date is today, yesterday, within a week or two weeks ago with moment.js, we can use the isSame and isAfter methods to compare dates.

For instance, we can write:

const REFERENCE = moment("2021-06-05");
const TODAY = REFERENCE.clone().startOf('day');
const YESTERDAY = REFERENCE.clone().subtract(1, 'days').startOf('day');
const A_WEEK_OLD = REFERENCE.clone().subtract(7, 'days').startOf('day');

const isToday = (momentDate) => {
  return momentDate.isSame(TODAY, 'd');
}

const isYesterday = (momentDate) => {
  return momentDate.isSame(YESTERDAY, 'd');
}

const isWithinAWeek = (momentDate) => {
  return momentDate.isAfter(A_WEEK_OLD);
}

const isTwoWeeksOrMore = (momentDate) => {
  return !isWithinAWeek(momentDate);
}

console.log(isToday(moment("2021-06-05")));
console.log(isYesterday(moment("2021-06-04")));
console.log(isWithinAWeek(moment("2021-06-03")));
console.log(isWithinAWeek(moment("2021-05-29")));
console.log(isTwoWeeksOrMore(moment("2021-05-30")));
console.log(isTwoWeeksOrMore(moment("2021-05-29")));

We have the REFERENCE date that we want to do various checks with.

TODAY is a copy of RERFERENCE , which is created by clone and then we set it to the start of the date with the startOf method.

YESTERDAY is a clone of REFERENCE subtract one day with subtract .

A_WEEK_OLD is a clone of REFERENCE subtract 7 days with subtract .

They’re also set to the start of the date with startOf .

Then we create the isToday function to call the isSame method on momentDate to check if the date is the same as TODAY .

We compare by date since we passed in 'd' as the 2nd argument.

Similarly, we use similar code to create isYesterday but with YESTERDAY instead of TODAY .

To create the isWithinWeek function, we use the isAfter function to check if the momentDate is after the start of a given week, which we stored in A_WEEK_OLD ,

And we check is 2 weeks or more before a given momentDate with the isWithinAWeek function.

Therefore, from the console log, we should get:

true
true
true
false
false
true

as a result.

Conclusion

To test if a date is today, yesterday, within a week or two weeks ago with moment.js, we can use the isSame and isAfter methods to compare dates.