Category: JavaScript

Sometimes, we want to get the change event for a datalist with JavaScript.

In this article, we’ll look at how to get the change event for a datalist with JavaScript.

How to get the change event for a datalist with JavaScript?

To get the change event for a datalist with JavaScript, we can listen to the input’s change event.

For instance, we write:

<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate">
  <option value="Coconut">
  <option value="Mint">
  <option value="Strawberry">
  <option value="Vanilla">
</datalist>

to add the input with a datalist with the options.

Then we write:

const input = document.querySelector('input')
input.onchange = (e) => {
  console.log(e.target.value)
}

to select the input with querySelector.

And then we set input.onchange to a function that logs the selected value.

As a result, when we select an option, we see the value attribute of the option element selected logged.

Conclusion

To get the change event for a datalist with JavaScript, we can listen to the input’s change event.

Sometimes, we want to add the vue.config.js file into a Vue CLI Vue project.

In this article, we’ll look at how to add the vue.config.js file into a Vue CLI Vue project.

How to add the vue.config.js file into a Vue CLI Vue project?

To add the vue.config.js file into a Vue CLI Vue project, we can add it to the root of the project folder.

In it, we write:

module.exports = {
  // options...
}

And we add all the options within the exported object.

Conclusion

To add the vue.config.js file into a Vue CLI Vue project, we can add it to the root of the project folder.

Sometimes, we want to cancel keydown with JavaScript.

In this article, we’ll look at how to cancel keydown with JavaScript.

How to cancel keydown with JavaScript?

To cancel keydown with JavaScript, we can call preventDefault in the keydown event handler.

For instance, we write:

document.onkeydown = (evt) => {
  const cancelKeypress = /^(13|32|37|38|39|40)$/.test(evt.keyCode.toString());
  if (cancelKeypress) {
    evt.preventDefault()
  }
};

to set document.onkeydown to a function that checks if the evt.keyCode matches any one of the numbers in the regex.

evt.keyCode is the code of the key that’s pressed.

If there’s a match, then we call evt.preventDefault to stop the default action.

Conclusion

To cancel keydown with JavaScript, we can call preventDefault in the keydown event handler.

Sometimes, we want to match multiple words in regex with JavaScript.

In this article, we’ll look at how to match multiple words in regex with JavaScript.

How to match multiple words in regex with JavaScript?

To match multiple words in regex with JavaScript, we can use lookahead assertions.

For instance, we write:

const r = /^(?=.*foo)(?=.*bar)(?=.*baz)/
console.log('foobarbazqux'.match(r))
console.log('foobar'.match(r))

to match the substrings containing foo, bar and baz.

The strings in the regex won’t be included in the match.

Therefore, the console logs log

[""]
null

Conclusion

To match multiple words in regex with JavaScript, we can use lookahead assertions.

Sometimes, we want to convert a date string to ISO date with JavaScript.

In this article, we’ll look at how to convert a date string to ISO date with JavaScript.

How to convert a date string to ISO date with JavaScript?

To convert a date string to ISO date with JavaScript, we can use the date’s toISOString method.

For instance, we write:

const dateString = '12/01/2022'
const s = new Date(dateString).toISOString()
console.log(s)

to create a Date instance from dateString.

Then we call toISOString to return an ISO 8601 date string.

Therefore, s is "2022-12-01T08:00:00.000Z".

Conclusion

To convert a date string to ISO date with JavaScript, we can use the date’s toISOString method.