Author: John Au-Yeung

Sometimes, we want to do something when a user right-clicks on an element in our web app.

In this article, we’ll look at how to handle right-clicks with JavaScript.

Set the window.oncontextmenu Property to a Function

We can set the window.contextmenu property to an event handler function to listen for right clicks on the page.

To do this, we write:

window.oncontextmenu = (e) => {  
  e.preventDefault()  
  console.log('right clicked')  
}

We have the e parameter that has the right-click event object.

We call e.preventDefault to stop the default behavior for right clicks, which is to show the context menu on the page.

Once we called that, we can do anything we want in the rest of the function when the user right-clicks on the page.

Call the window.addEventListener Method to Add an Event Listener Function

Another way to do something when we right-click on the page is to call the window.addEventListener method to add an event listener function for listening to right clicks.

For instance, we can write:

window.addEventListener('contextmenu', (ev) => {  
  ev.preventDefault();  
  console.log('right clicked')  
});

We pass in the 'contextmenu' string to listen for context menu click events.

Then in the event listener, we call preventDefault the same way to stop the default right-click menu from displaying.

And then we can do what we want when the user right-clicks on the page.

Conclusion

We can listen for the contextmenu event and call preventDefault in the event handler function to run our own JavaScript when we right-click on the page.

Sometimes, we want to convert a JavaScript array into a set.

In this article, we’ll look at how to convert a JavaScript array to a set.

Create a Set with the JavaScript Set Constructor

We can use the JavaScript Set constructor to create a JavaScript set from an array.

For instance, we can write:

const array = [{
    name: "malcom",
    dogType: "golden retriever"
  },
  {
    name: "peabody",
    dogType: "bulldog"
  },
  {
    name: "pablo",
    dogType: "chihuahua"
  }
];
const namesSet = new Set(array.map(d => d.name));
console.log(namesSet)

We have an array array with an array of objects.

We want to create a set with the name value from each object.

To do this, we call array.map with a callback to return the name property of each object.

We then pass the returned names string array into the Set constructor to create the set.

Therefore namesSet is a set with “malcom”, “peabody”, and “pablo” in it.

Passing the array into the Set constructor will remove the duplicate values if there are any in the set.

Conclusion

We can use the JavaScript Set constructor to create a set from an array.

Sometimes, we want to get the names of the properties in a JavaScript object.

In this article, we’ll look at how to get a JavaScript object’s property names with JavaScript.

Using the Object.keys Method

We can use the Object.keys method to return an array of property name strings.

For instance, we can write:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
Object.keys(obj).forEach(key => {
  console.log(key)
  console.log(obj[key])
})

We created the obj object with properties a , b , and c .

Then we call Object.keys with obj to return the property names of obj as strings.

Then we call forEach with a callback that has the key parameter with the key of the object being iterated through.

In the callback, we log the key and the value which we access with obj[key] .

Therefore, we get:

a
1
b
2
c
3

as the result.

Using the for-in Loop

We can get the object keys with the for-in loop.

For instance, we can write:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const key in obj) {
  console.log(key);
  console.log(obj[key]);
}

We get the object key from the key loop variable.

And then we get the key and value within the loop body the same way.

Therefore, we get:

a
1
b
2
c
3

as the result just like the previous example.

The for-in loop also loops through any properties inherited from prototype objects so we may get more keys than from the Object.keys method.

Object.keys only get property keys from non-inherited properties.

Conclusion

We can use the Object.keys method or the for-in loop to get the keys from a JavaScript object.

Sometimes, we want to disable an HTML button using JavaScript.

In this article, we’ll look at how to disable an HTML button using JavaScript.

Setting the disabled Property of a Button to true

To disable an HTML button using JavaScript, we can select the button and then set the disabled property of it.

For instance, if we have the following HTML:

<button>
  click me
</button>

Then we can select the button with document.querySelector and set its disabled property by writing:

document.querySelector("button").disabled = true;

Now we should see the button is disabled.

Use the setAttribute Method to set the disabled Attribute of a Button

Another way to set the disabled attribute of the button is to use the setAttribute method.

For instance, if we have the following HTML:

<button>
  click me
</button>

Then we can select the button with document.querySelector and set its disabled attribute with setAttribute by writing:

document.querySelector("button").setAttribute("disabled", "disabled");

We call setAttribute with the attribute name to set and the value to set it to as arguments respectively.

Also, we can write:

document.querySelector("button").setAttribute("disabled", true);

to set the disabled attribute top true to disable the button.

Conclusion

We can disable an HTML button with JavaScript by setting the disabled attribute of the selected button with JavaSceipt.

Sometimes, we want to filter a JavaScript array from all elements of another JavaScript array.

In this article, we’ll look at how to filter a JavaScript array from all elements of another array.

Using the Array.prototype.filter Method

We can use the JavaScript array filter method to filter out the array entries that are entries of another array.

For instance, we can write:

const filtered = [1, 2, 3, 4].filter(
  function(e) {
    return this.indexOf(e) < 0;
  },
  [2, 4]
);
console.log(filtered);

to do so.

We call filter on [1, 2, 3, 4] with a callback that calls this.indexOf(e) < 0 and return the result.

We set the value of this in the callback with the 2nd argument of filter .

Therefore, this is [2, 4] .

And so filtered is [1, 3] .

We cam also use the includes method to filter out the items that are in the other array.

For instance, we can write:

const filtered = [1, 2, 3, 4].filter(
  function(e) {
    return !this.includes(e);
  },
  [2, 4]
);
console.log(filtered);

And we get the same result for filter .

We can replace the callback with an array function if we don’t use this inside the callback.

To do this, we can write:

const filtered = [1, 2, 3, 4].filter(
  (e) => {
    return [2, 4].indexOf(e) < 0;
  }
);
console.log(filtered);

or:

const filtered = [1, 2, 3, 4].filter(
  (e) => {
    return ![2, 4].includes(e);
  }
);
console.log(filtered);

We replace this with the array itself.

And we get the same result.

Conclusion

We can use the JavaScript array filter instance method to return an array that has the items that are included in another array filtered out.