thiscodeWorks - Organizing the best of code online

function as a callback inside a higher order function

  const transactions = [200, 450, -400, 3000, -650, -130, 70, 1300];
  function myFunc(item, date = '2nd Feb') {
    // adding in date default here but assume its from somewhere else
    
    return { amount: item, date }; // creating an object with both item and date
  }

  // forEach
  const test1 = transactions.map(item => myFunc(item, date));
  console.log(test1);

#callback #functions #forms

callback functions explained version 2 Form and value

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Example</title>
</head>
<body>
  <form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="button" onclick="handleFormSubmit()">Submit</button>
  </form>

  <script src="script.js"></script>
</body>
</html>



// the JS
// Function to get the value from the input field
function getValue(callback) {
  // Get the input field
  const nameInput = document.getElementById('name');
  // Get the value from the input field
  const nameValue = nameInput.value;
  // Pass the value to the callback function
  callback(nameValue);
}

// Callback function to process the value
function processValue(value) {
  console.log('Processing value...');
  console.log(`Value received: ${value}`);
  // You can add more logic here to process the value further
}

// Function to handle form submission
function handleFormSubmit() {
  getValue(processValue);
}

#callback #functions

callback functions explained version 1

(function () {
  'use strict';

  function fetchData(callback) { // create the first (outer) function
    const data = 'get data from an API';
    setTimeout(() => {
      callback(data); // use the callback param as a function and pass in the data value
    }, 1000);
  }

  function displayData(data) { // create the inner function that takes in the callback as a param
    console.log('processing data');
    console.log(data);
  }

  fetchData(displayData); // finally call the outer function with the inner function as a value
})();

#callback

callbacks

const getSelectValue = (callback) => {
  const options = getElement("#city-select");

  options.addEventListener("change", function (e) {
    const value = e.target.value;
    // pass the value into the callback function we can use later
    callback(value); // this value needs to be passed into the function where we are using the getSelectValue function ie  getSelectValue(value)
  });
};




// app function
const init = () => {
  // populate the DOM with the cities data on load
  const selectDOM = getElement("#city-select");
  populateDOM(cities, selectDOM);

  let selectedCity = ""; // this gets updated with the function below

  // need to run the callback here
  // get the value and assign it to a variable outside the function
  getSelectValue((value) => {
    selectedCity = value; // Assign the value to selectedCity
    //  // Log the selected city
    if (selectedCity !== "") {
      const container = getElement(".container h3");
      container.textContent = selectedCity;
    }
  });
};

window.addEventListener("DOMContentLoaded", init);

function as a callback inside a higher order function

callback functions explained version 2 Form and value

callback functions explained version 1

callbacks

Save snippets that work with our extensions