Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to call a function periodically in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to call a function periodically in JavaScript.

In this article, we’ll look at how to call a function periodically in JavaScript.

How to call a function periodically in JavaScript?

To call a function periodically in JavaScript, we call the setInterval function.

For instance, we write

const intervalId = setInterval(() => {
  console.log("Interval reached every 5s");
}, 5000);

to call setInterval with a callback that runs every 5 seconds.

We specify the period with the 2nd argument in milliseconds.

setInterval returns the ID number of the timer.

And we can use clearInterval with the timer ID number to stop the timer.

Conclusion

To call a function periodically in JavaScript, we call the setInterval function.

Categories
HTML

How to select multiple files with file input in HTML?

Labrador retriever puppy walking on green grass

Sometimes, we want to select multiple files with file input in HTML.

In this article, we’ll look at how to select multiple files with file input in HTML.

How to select multiple files with file input in HTML?

To select multiple files with file input in HTML, we add the multiple attribute.

For instance, we write

<input type="file" name="fileField" multiple="multiple">

to add the multiple attribute to the file input and set it to multiple to enable multi-file upload.

Conclusion

To select multiple files with file input in HTML, we add the multiple attribute.

Categories
React Answers

How to identify different inputs with one onChange handler with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to identify different inputs with one onChange handler with React.

In this article, we’ll look at how to identify different inputs with one onChange handler with React.

How to identify different inputs with one onChange handler with React?

To identify different inputs with one onChange handler with React, we can create a function that gets the name attribute value of the field and put it in the state object as a property with the value of the same input as the value.

For instance, we write

import React, { useState } from "react";

export default function Exapmle() {
  const [userState, setUserState] = useState({
    firstName: "",
    lastName: "",
  });

  const handleChange = (e) => {
    const value = e.target.value;
    setUserState({
      ...userState,
      [e.target.name]: value,
    });
  };

  return (
    <form>
      <label>
        First name
        <input
          type="text"
          name="firstName"
          value={userState.firstName}
          onChange={handleChange}
        />
      </label>

      <label>
        Last name
        <input
          type="text"
          name="lastName"
          value={userState.lastName}
          onChange={handleChange}
        />
      </label>
    </form>
  );
}

to add 2 inputs with different name attribute values.

Then we define the handleChange function that gets the input value with e.target.value.

And we call setusetState with an object that has the existing userState properties.

And we add the [e.target.name] property with its value set to value.

e.target.name returns the name attribute value of the input.

Conclusion

To identify different inputs with one onChange handler with React, we can create a function that gets the name attribute value of the field and put it in the state object as a property with the value of the same input as the value.

Categories
Vue Answers

How to get selected option on @change with Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to get selected option on @change with Vue.js.

In this article, we’ll look at how to get selected option on @change with Vue.js.

How to get selected option on @change with Vue.js?

To get selected option on @change with Vue.js, we can set @change to a function calls with $event.

For instance, we write

<template>
  <select @change="onChangeMethod($event)">
    <option value="test">Test</option>
    <option value="test2">Test2</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      //...
    };
  },
  methods: {
    onChangeMethod(event) {
      console.log(event.target.value);
    },
  },
  created() {
    //...
  },
};
</script>

to add a select drop down.

And we set @change to onChangeMethod($event), which means onChangeMethod is called with the change event object.

Then when selection changes, we get the selected options’ value attribute value with event.target.value.

Conclusion

To get selected option on @change with Vue.js, we can set @change to a function calls with $event.

Categories
React Answers

How to pass event with parameter with React onClick?

Labrador retriever puppy walking on green grass

Sometimes, we want to pass event with parameter with React onClick.

In this article, we’ll look at how to pass event with parameter with React onClick.

How to pass event with parameter with React onClick?

To pass event with parameter with React onClick, we set the onClick prop to a function that returns another function.

For instance, we write

const clickMe = (parameter) => (event) => {
  // ...
};

//...

<button onClick={clickMe(someParameter)} />;

to create the clickMe function that takes the parameter parameter and returns a function that takes the event parameter.

Then we set the onClick prop of the button to the function returned by clickMe called with someParameter, which is the function that has event as the parameter.

Conclusion

To pass event with parameter with React onClick, we set the onClick prop to a function that returns another function.