Author: John Au-Yeung

Sometimes, we want to find an element in a documentFragment with JavaScript.

In this article, we’ll look at how to find an element in a documentFragment with JavaScript.

How to find an element in a documentFragment with JavaScript?

To find an element in a documentFragment with JavaScript, we can use the querySelector method.

For instance, we write:

const df = document.createDocumentFragment();
const div = document.createElement('div');
div.id = 'foo';
df.appendChild(div);
const result = df.querySelector('#foo')
console.log(result)

to create a document fragment with createDocumentFragement.

Then we create a div with createElement.

And then we call df.appendChild with div to append the div as a child of the document fragment.

Next, we call df.querySelector with the select for the div to return the div.

Conclusion

To find an element in a documentFragment with JavaScript, we can use the querySelector method.

Sometimes, we want to insert row at end of table with HTMLTableElement.insertRow with JavaScript.

In this article, we’ll look at how to insert row at end of table with HTMLTableElement.insertRow with JavaScript.

How to insert row at end of table with HTMLTableElement.insertRow with JavaScript?

To insert row at end of table with HTMLTableElement.insertRow with JavaScript, we can call insertRow with -1.

For instance, we write:

<table>
  <tbody></tbody>
</table>

to add a table.

Then we write:

const data = [{
    "a": 1,
    "b": 2,
    "c": 3
  },
  {
    "a": 4,
    "b": 5,
    "c": 6
  },
  {
    "a": 7,
    "b": 8,
    "c": 9
  }
]

const table = document.querySelector('table')
for (const d of data) {
  const row = table.insertRow(-1);
  for (const c of Object.values(d)) {
    const cell = row.insertCell(-1);
    cell.textContent = c
  }
}

to select the table with querySelector.

Then we loop through the data array with a for-of loop.

In the loop, we call insertRow with -1 to append a row to the table.

Then we loop through the property values for each data entry that we got from Object.values to insert the cells.

We append a cell to the row by calling row.insertCell with -1.

And then we set the textContent to c.

As a result, we see:

1	2	3
4	5	6
7	8	9

displayed.

Conclusion

To insert row at end of table with HTMLTableElement.insertRow with JavaScript, we can call insertRow with -1.

Sometimes, we want to display a users local zone abbreviation with JavaScript.

In this article, we’ll look at how to display a users local zone abbreviation with JavaScript.

How to display a users local zone abbreviation with JavaScript?

To display a users local zone abbreviation with JavaScript, we can use moment-timezone.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone.min.js"></script>

to add moment.js and moment-timezone.

Then we write:

moment.tz.add([
  'America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0',
  'America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0'
]);
const tz = moment.tz("America/New_York").zoneAbbr()
console.log(tz)

to call moment.tz.add to add the time zone data.

Then we call moment.tz with the time zone string we just added to return the time zone object.

And then we call zoneAbbr to return the time zone’s abbreviation.

Therefore, tz is 'EDT'.

Conclusion

To display a users local zone abbreviation with JavaScript, we can use moment-timezone.

Sometimes, we want to find the equivalent of jQuery $(window).on('resize') in JavaScript.

In this article, we’ll look at the equivalent of jQuery $(window).on('resize') in JavaScript.

What’s the equivalent of jQuery $(window).on(‘resize’) in JavaScript?

The equivalent of jQuery $(window).on('resize') in JavaScript is:

window.addEventListener('resize', () => {})

We call window.addEventListener with 'resize' and a callback that runs when the window is resized to add an event listener for the resize event.

The resize event is triggered when we resize the window.

Conclusion

The equivalent of jQuery $(window).on('resize') in JavaScript is:

window.addEventListener('resize', () => {})

Sometimes, we need to fix the ‘React a component is changing an uncontrolled input of type checkbox to be controlled’ error with JavaScript.

In this article, we’ll look at how to fix the ‘React a component is changing an uncontrolled input of type checkbox to be controlled’ error with JavaScript.

How to fix the ‘React a component is changing an uncontrolled input of type checkbox to be controlled’ error with JavaScript?

To fix the ‘React a component is changing an uncontrolled input of type checkbox to be controlled’ error with JavaScript, we should make sure the value prop always has a value set.

For instance, we write:

import React from "react";

export default function App() {
  const [name, setName] = React.useState();

  return (
    <div>
      <input value={name ?? ""} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

to define the name state with useState and didn’t set an initial value for name.

Then we add the input with the value prop set to name.

If name isn’t defined, we set it to an empty string.

As a result, the ‘React a component is changing an uncontrolled input of type checkbox to be controlled’ error won’t be thrown.

Conclusiun

To fix the ‘React a component is changing an uncontrolled input of type checkbox to be controlled’ error with JavaScript, we should make sure the value prop always has a value set.