Category: JavaScript

Categories
JavaScript Answers

How to add or remove HTML inside div using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add or remove HTML inside div using JavaScript.

In this article, we’ll look at how to add or remove HTML inside div using JavaScript.

How to add or remove HTML inside div using JavaScript?

To add or remove HTML inside div using JavaScript, we can use the insertAdjacentHTML method.

For instance, we write

const addRow = () => {
  const div = document.getElementById("content");
  div.insertAdjacentHTML("afterbegin", "PUT_HTML_HERE");
};

to define the addRow function.

In it, we call getElementById to get the element with ID content.

Then we call div.insertAdjacentHTML to put HTML at the 'afterbegin' position.

To add HTML after the div.

Conclusion

To add or remove HTML inside div using JavaScript, we can use the insertAdjacentHTML method.

Categories
React Answers

How to get data from the Material UI TextField component?

Labrador retriever puppy walking on green grass

Sometimes, we want to get data from the Material UI TextField component.

In this article, we’ll look at how to get data from the Material UI TextField component.

How to get data from the Material UI TextField component?

To get data from the Material UI TextField component, we can get the input value from the onChange callback.

For instance, we write

import React from "react";
import { useState } from "react";

import TextField from "@material-ui/core/TextField";

const Input = () => {
  const [textInput, setTextInput] = useState("");

  const handleTextInputChange = (event) => {
    setTextInput(event.target.value);
  };

  return (
    <TextField
      label="Text Input"
      value={textInput}
      onChange={handleTextInputChange}
    />
  );
};

export default Input;

to add a TextField with the onChange prop set to the handleTextInputChange function.

In it, we call setTextInput with the event.target.value property which has the input value.

Then we get the input value from the textInput state, which we set as the value of the value prop.

Conclusion

To get data from the Material UI TextField component, we can get the input value from the onChange callback.

Categories
JavaScript Answers

How to filter an array with a function that returns a promise with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to filter an array with a function that returns a promise with JavaScript.

In this article, we’ll look at how to filter an array with a function that returns a promise with JavaScript.

How to filtering an array with a function that returns a promise with JavaScript?

To filter an array with a function that returns a promise with JavaScript, we can use the Promise.all method with the array filter method.

For instance, we write

const filterPromise = async (values, fn) => {
  const booleans = await Promise.all(values.map(fn));
  const filtered = values.filter((_, i) => booleans[i]);
  return filtered;
};

to define the filterPromise function.

In it, we call Promise.all with an array of promises we get from values.map(fn).

Then we call values.filter with a callback that returns an array of filtered values according to the values of booleans[i].

Conclusion

To filter an array with a function that returns a promise with JavaScript, we can use the Promise.all method with the array filter method.

Categories
JavaScript Answers

How to determine original size of image cross browser with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to determine original size of image cross browser with JavaScript.

In this article, we’ll look at how to determine original size of image cross browser with JavaScript.

How to determine original size of image cross browser with JavaScript?

To determine original size of image cross browser with JavaScript, we get the dimensions from the image element’s onload callback.

For instance, we write

const newImg = new Image();

newImg.onload = () => {
  const { height, width } = newImg;
  console.log(width, height);
};

newImg.src = imgSrc;

to create an img element with the Image constructor.

Then we set its onload property to a function that gets the width and height of the image.

We then set the src property of the image to imgSrc which will trigger onload to run.

Conclusion

To determine original size of image cross browser with JavaScript, we get the dimensions from the image element’s onload callback.

Categories
JavaScript Answers

How to copy text from a div to clipboard with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to copy text from a div to clipboard with JavaScript.

In this article, we’ll look at how to copy text from a div to clipboard with JavaScript.

How to copy text from a div to clipboard with JavaScript?

To copy text from a div to clipboard with JavaScript, we can use the document.execCommand method.

For instance, we write

const range = document.createRange();
range.selectNode(document.getElementById("a"));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();

to create the range object with createRange.

Then we call selectNode with the element we want to copy text from.

Next we call removeAllRanges to remove all existing selections.

Then we call addRange to add the new range.

We call execCommand with 'copy' to copy the element’s text into the clipboard.

Finally, we call removeAllRanges to remove the selected text.

Conclusion

To copy text from a div to clipboard with JavaScript, we can use the document.execCommand method.