Author: John Au-Yeung

Sometimes, we want to detect Ctrl + A press in a keyup event with JavaScript.

In this article, we’ll look at how to detect Ctrl + A press in a keyup event with JavaScript.

How to detect Ctrl + A press in a keyup event with JavaScript?

To detect Ctrl + A press in a keyup event with JavaScript, we can set the document.onkeyup property to a function that checks for the pressing ctrl+a key combo.

For instance, we write:

document.onkeyup = (e) => {
  if (e.ctrlKey && (e.keyCode == 65 || e.keyCode == 97)) {
    console.log('ctrl+a pressed')
  }
}

We set document.onkeyup to a function that checks if ctrl is pressed with e.ctrlKey.

And we check if the ‘a’ key is pressed with (e.keyCode == 65 || e.keyCode == 97).

If they’re both true, then we know ctrl+a is pressed.

Conclusion

To detect Ctrl + A press in a keyup event with JavaScript, we can set the document.onkeyup property to a function that checks for the pressing ctrl+a key combo.

Sometimes, we want to get the item that appears the most times in an array with JavaScript.

In this article, we’ll look at how to get the item that appears the most times in an array with JavaScript.

How to get the item that appears the most times in an array with JavaScript?

To get the item that appears the most times in an array with JavaScript, we can use some object and array methods.

For instance, we write:

const store = ['1', '2', '2', '3', '4', '5', '5']
const counts = {}
for (const s of store) {
  if (!counts[s]) {
    counts[s] = 1
  } else {
    counts[s]++
  }
}

const mostTimes = Math.max(...Object.values(counts))
const mostPopular = Object
  .entries(counts)
  .filter(([, count]) => count === mostTimes)
  .map(([key]) => key)
console.log(mostPopular)

We loop through each store entry and put the value as the keys of counts and the count of each value as the value.

Then we get the highest count by getting the property values of counts with Object.values.

And then we get the max value with Math.max and spreading the values from the array as arguments.

Next, we get the elements with the highest count with Object.entries to return the key-value pairs as an array of key-value pair arrays.

Then we call filter to get the items with count equals to mostTimes.

Finally, we call map to get the values with the highest count.

Therefore, mostPopular is ['2', '5'].

Conclusion

To get the item that appears the most times in an array with JavaScript, we can use some object and array methods.

Sometimes, we want to access an HTML element without an ID with JavaScript.

In this article, we’ll look at how to access an HTML element without an ID with JavaScript.

How to access an HTML element without an ID with JavaScript?

To access an HTML element without an ID with JavaScript, we can use document.querySelector.

For instance, we write:

<div id='header-inner'>
  <div class='titlewrapper'>
    <h1 class='title'>
      Some text I want to change
    </h1>
  </div>
</div>

to add a div with an h1 element in it.

Then to select the h1 element, we write:

const h1 = document.querySelector('#header-inner h1')
console.log(h1)

We use the '#header-inner h1' select to select the h1 element inside the div with ID header-inner.

Therefore, the h1 element is logged.

Conclusion

To access an HTML element without an ID with JavaScript, we can use document.querySelector.

Sometimes, we want to trigger event with parameters with JavaScript.

In this article, we’ll look at how to trigger event with parameters with JavaScript.

How to trigger event with parameters with JavaScript?

To trigger event with parameters with JavaScript, we can trigger a custom event.

For instance, we write:

<button>
  click me
</button>

to add a button.

Then we write:

const button = document.querySelector("button");
button.addEventListener("custom-event", (e) => {
  console.log("custom-event", e.detail);
});
button.onclick = (e) => {
  const event = new CustomEvent("custom-event", {
    'detail': {
      customInfo: 10,
      customProp: 20
    }
  });
  e.target.dispatchEvent(event);
};

to select the button with querySelector.

Then we call button.addEventListener to add an event listener for the custom-event event.

We get the event data from e.detail.

Then we add a click listener to the button by setting button.onclick to a function that creates a new CustomEvent instance with the event name and some event data.

We then call e.target.dispatchEvent with event to trigger the custom-event event on the button.

Therefore, we see {customInfo: 10, customProp: 20} logged when we click the button.

Conclusion

To trigger event with parameters with JavaScript, we can trigger a custom event.