Author: John Au-Yeung

Sometimes, we want to get all input fields inside div with JavaScript.

In this article, we’ll look at how to get all input fields inside div with JavaScript.

How to get all input fields inside div with JavaScript?

To get all input fields inside div with JavaScript, we select the container div with querySelector.

Then we select all the input elements inside with querySelectorAll.

For instance, we write:

<div>
  <input>
  <input>
  <input>
</div>

to add inputs inside the div.

Then we write:

const divElem = document.querySelector("div");
const inputElements = divElem.querySelectorAll("input, select, checkbox, textarea")
console.log(inputElements)

to select the div with querySelector.

And then we call divElement.querySelectorAll with a selector string that selects input, select, checkbox, and textarea elements.

Therefore, inputElements is a node list with the 3 inputs.

Conclusion

To get all input fields inside div with JavaScript, we select the container div with querySelector.

Then we select all the input elements inside with querySelectorAll.

Sometimes, we want to use array reduce with condition in JavaScript.

In this article, we’ll look at how to use array reduce with condition in JavaScript.

How to use array reduce with condition in JavaScript?

To use array reduce with condition in JavaScript, we can call filter before we call reduce.

For instance, write:

const records = [{
    value: 24,
    gender: "male"
  },
  {
    value: 42,
    gender: "female"
  },
  {
    value: 85,
    gender: "female"
  },
  {
    value: 12,
    gender: "female"
  },
  {
    value: 10,
    gender: "male"
  }
]

const sumMaleAge = records
  .filter(({
    gender
  }) => gender === 'male')
  .reduce((sum, record) => sum + record.value, 0)
console.log(sumMaleAge)

We call records.filter with a callback that returns an array with records entries that have the gender value set to 'male'.

Then we call reduce on the returned array with a callback that returns the sum of the of the value from the filtered records entries.

Therefore, sumMaleAge is 34 since we summed up the value property values from the records entries with gender set to 'male'.

Conclusion

To use array reduce with condition in JavaScript, we can call filter before we call reduce.

Sometimes, we want to check if string is valid CSS color with JavaScript.

In this article, we’ll look at how to check if string is valid CSS color with JavaScript.

How to check if string is valid CSS color with JavaScript?

To check if string is valid CSS color with JavaScript, we can use the CSS.supports method.

For instance, we write:

const isRedValid = CSS.supports('color', 'red')
console.log(isRedValid)

const isRandomValid = CSS.supports('color', 'random')
console.log(isRandomValid)

to call CSS.supports with the CSS property and the value respectively.

We call it to check if 'red' is a valid CSS color property value with:

const isRedValid = CSS.supports('color', 'red')

Likewise, we call it to check if 'random' is a valid CSS color property value with:

const isRandomValid = CSS.supports('color', 'random')

Therefore, isRedValid is true and isRandomValid is false.

Conclusion

To check if string is valid CSS color with JavaScript, we can use the CSS.supports method.

Sometimes, we want to remove parenthesis from a string in JavaScript.

In this article, we’ll look at how to remove parenthesis from a string in JavaScript.

How to remove parenthesis from a string in JavaScript?

To remove parenthesis from a string in JavaScript, we can call the JavaScript string’s replace with a regex that matches all parentheses, brackets, and braces and replace them with empty strings.

For instance, we write:

const str = '[]({foobar})'
const newStr = str.replace(/[\])}[{(]/g, '');
console.log(newStr)

We call str.replace with /[\])}[{(]/g to match all parentheses, brackets, and braces in str and replace them all with empty strings.

Then we assign the returned string to newStr.

As a result, newStr is 'foobar'.

Conclusion

To remove parenthesis from a string in JavaScript, we can call the JavaScript string’s replace with a regex that matches all parentheses, brackets, and braces and replace them with empty strings.

Sometimes, we want to extract the number part of a string with JavaScript.

In this article, we’ll look at how to extract the number part of a string with JavaScript.

How to extract the number part of a string with JavaScript?

To extract numbers from a string with JavaScript, we can use the JavaScript string’s replace method.

For instance, we write:

const str = 'foo123bar456'
const number = str.replace(/\D/g, '');
console.log(number)

to call str.replace with a regex that matches all non-digit characters and replace them with empty strings.

Therefore, number is '123456'.

Conclusion

To extract numbers from a string with JavaScript, we can use the JavaScript string’s replace method.