Category: JavaScript Answers

Sometimes, we want to get the selected values of a multiple select element on change with JavaScript.

In this article, we’ll look at how to get the selected values of a multiple select element on change with JavaScript.

How to get the selected values of a multiple select element on change with JavaScript?

To get the selected values of a multiple select element on change with JavaScript, we can get all the options from the selectedOptions property of the select element.

For instance, we write:

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="mango">Mango</option>
  <option value="grape">Grape</option>
  <option value="watermelon">watermelon</option>
</select>

to add a multi-select element.

Then we write:

const select = document.querySelector('select')
select.onchange = (e) => {
  const selectedVals = [...e.target.selectedOptions].map(o => o.value)
  console.log(selectedVals)
}

to select the select element with querySelector.

We then set the select.onchange property to a function that gets all the selected options.

To do this, we get all the selected options with e.target.selectedOptions.

And then we spread them into an array and call map with a callback that returns the value from each selected option.

Conclusion

To get the selected values of a multiple select element on change with JavaScript, we can get all the options from the selectedOptions property of the select element.

Sometimes, we want to add an array to two-dimensional array with JavaScript.

In this article, we’ll look at how to add an array to two-dimensional array with JavaScript.

How to add an array to two-dimensional array with JavaScript?

To add an array to two-dimensional array with JavaScript, we can use the array push method.

For instance, we write:

const arr = [
  [1, 2, 3],
  [4, 5, 6],
];

arr.push([7, 8, 9]);
console.log(arr)

to call arr.push to append a new array to arr.

Therefore, arr is:

[
  [
    1,
    2,
    3
  ],
  [
    4,
    5,
    6
  ],
  [
    7,
    8,
    9
  ]
]

Conclusion

To add an array to two-dimensional array with JavaScript, we can use the array push method.

Sometimes, we want to parse a date in YYYYmmdd format in JavaScript.

In this article, we’ll look at how to parse a date in YYYYmmdd format in JavaScript.

How to parse a date in YYYYmmdd format in JavaScript?

To parse a date in YYYYmmdd format in JavaScript, we can use some syring methods.

For instance, we write:

const parse = (str) => {
  const y = str.substr(0, 4)
  const m = str.substr(4, 2) - 1
  const d = str.substr(6, 2);
  const date = new Date(y, m, d);
  return (date.getFullYear() === +y && date.getMonth() === +m && date.getDate() === +d) ? date : 'invalid date';
}

console.log(parse('20220202'))

to define the parse function to parse the date string str.

We extract the year y, month m and date d with substr.

And we subtract 1 from m to get a 0-based month required by JavaScript’s Date constructor.

Next, we check if the year, month, and date are all valid with date.getFullYear() === +y && date.getMonth() === +m && date.getDate() === +d.

If that’s true, then we return the date.

Otherwise, we return 'invalid date'.

Conclusion

To parse a date in YYYYmmdd format in JavaScript, we can use some syring methods.

Sometimes, we want to check if a text area is empty in JavaScript.

In this article, we’ll look at how to check if a text area is empty in JavaScript.

How to check if a text area is empty in JavaScript?

To check if a text area is empty in JavaScript, we can check if e.target.value is falsy or not.

For instance, we write:

<textarea></textarea>

to add a text area.

Then we write:

const textarea = document.querySelector('textarea')
textarea.onchange = (e) => {
  if (!e.target.value) {
    console.log('empty')
  }
}

to select the text area with querySelector.

And we set textarea.onchange to a function that checks if e.target.value is falsy to check if it’s empty when we type into the text area.

Conclusion

To check if a text area is empty in JavaScript, we can check if e.target.value is falsy or not.

Sometimes, we want to get the browser width and height after user resizes the window with JavaScript.

In this article, we’ll look at how to get the browser width and height after user resizes the window with JavaScript.

How to get the browser width and height after user resizes the window with JavaScript?

To get the browser width and height after user resizes the window with JavaScript, we can get the clientWidth and clientHeight properties from the window resize event handler.

For instance, we write:

window.onresize = () => {
  const {
    clientWidth,
    clientHeight
  } = document.body;
  console.log(clientWidth, clientHeight)
}

We set window.onresize to a function that gets the width and height of the body element with:

const {
  clientWidth,
  clientHeight
} = document.body;

Now when we resize the window, we should see the values logged.

Conclusion

To get the browser width and height after user resizes the window with JavaScript, we can get the clientWidth and clientHeight properties from the window resize event handler.