The function is not a function: TypeError: func(...).then

I am a newbie in JavaScript, currently delving into functions and promises. I have created a small code snippet with the following purpose: to comprehend how promise function (then) works on a function that returns a value. input: a,b output: if the sum of a & b is 0, then display an alert statement, otherwise show the sum in the alert message.

const func = (a, b) => {

  let operand1 = a * 10;
  let operand2 = b * 10;

  return operand1 + operand2
};

const funcwrapper = (a, b) => {
  func(a, b).then((sum) => {
    if (sum == 0) {
      window.alert("value is zero");
    } else {
      window.alert(("sum is " + sum));
    }
  })
};

funcwrapper(5, 5);

Despite reading extensively on promises on functions with return values, I still find it challenging. Therefore, I decided to implement this code to gain a better understanding but encountered some errors along the way.

If you can offer guidance on this topic, I would greatly appreciate it.

Your assistance is valued. Thank you in advance

Answer №1

func() must be designed to return a promise:

const func = (a, b) => {

  let operand1 = a * 10;
  let operand2 = b * 10;

  return new Promise((resolve, reject) => resolve(operand1 + operand2));
};

const funcwrapper = (a, b) => {
  func(a, b).then((sum) => {
    if (sum == 0) {
      window.alert("value is zero");
    } else {
      window.alert(("sum is " + sum));
    }
  })
};

funcwrapper(5, 5);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The width of Highcharts increases proportionally to the growth of the chart's width

I want to create a highcharts graph where the width increases as data points increase. Currently, I have: I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks. <div class="col-md-6" style= ...

It is not possible to utilize PopOver within the Header Menu Item

I am looking to create a header with a popover component. import React from "react"; import { Layout, Menu, Button } from "antd"; const { Header, Popover } = Layout; const { SubMenu } = Menu; const Index = (props) => { const content = ( & ...

Are you on the lookout for an Angular2 visual form editor or a robust form engine that allows you to effortlessly create forms using a GUI, generator, or centralized configuration

In our development team, we are currently diving into several Angular2< projects. While my colleagues are comfortable coding large forms directly with Typescript and HTML in our Angular 2< projects, I am not completely satisfied with this method. We ...

Challenges arising from the rendering of main.js in Vue.js

Recently, I started working with Vue and am now faced with the task of maintaining a project. Main.js contains the routing structure: Main.js import Vue from 'vue' const app = new Vue({ el: '#app', data: { message: & ...

Searching for a way to access the child window URL within the parent window on a React.JS platform?

I am working on a ReactJS code and I need to open another URL in my child component. twitterPopup = () => { var currentChild = false; if (currentChild) child.close(); child = window.open( "http://10.10.1.1:9090/api/v1/twitter/login" ...

Component for editing A-frame frame to mimic div rather than canvas

Looking for a Solution Hello! I have developed a VR scene using A-frame (). Currently, there is a custom component in my scene that reflects the code on a canvas onto a plane within the scene. However, I am interested in modifying the component to reflect ...

decide whether to use webpack bundling during development or not

Whenever I save a file, it takes around 30 seconds for the changes to reflect. I am currently using gulp watch and webpack for bundling around a hundred files. Is there any way to speed up the build process? ...

Utilizing exponential formatting for Plotly axis scales

Following up on a previous question here: SO Q The solution provided in the previous question uses JavaScript code to convert axis ticks into exponential format, but it only works for a single axis on a single plot. When applied in a subplot() structure, ...

Encountering a Hydration Error with Next.JS and MDX-Bundler when a MDX Component Adds Extra New Lines to its Children

Currently, I am incorporating next.js + mdx-bundler into my project. There is a simple component that I frequently use in my mdx files. Everything runs smoothly with the following code: Mdx is a great <Component>format and I like it a lot</Compon ...

Revise the elements within the array

I am currently working on a project that involves creating a dynamic product list similar to a shopping cart. I start by loading a series of products into an array of objects. products = [ { id: 1, name: "Product1" ...

The React date picker is experiencing a delay when opened with a click

A peculiar problem has arisen with react-datepicker. I have successfully integrated my datepicker with Redux Form, and the code is as follows: <DatePicker customInput={<CustomDateInputNew {...props} />} onChange={date => { props.input. ...

Is it possible to incorporate an editable text feature within react-moveable? (Allowing for both dragging and editing capabilities)

In React Movable box, the text can be dragged with a left click and edited with a right click using the "contentEditable" attribute. However, on smartphones, editing seems to be disabled and only dragging is possible. <div className="move ...

Implement a callback function for unchecked checkboxes on change

Currently, I am working with a gridview that includes a checkbox field. My goal is to use jQuery to create a function that activates when an unchecked checkbox is checked. function clickAllSize() { alert("helloy"); } $(document).ready(function () { ...

Retrieve data from an array of JSON objects within a JSON object using ReactJS

Trying to extract data from JSON like this: { "id": 371, "city": "London", "name": "London Station", "trains": [ { "id": 375, "number": "1023", "numberOfCarriages": "21" } ] } Interes ...

Loading Website Content, Track your Progress

I'm facing an issue with the website loading progress bar. The script I'm using for the progress bar is not functioning correctly on the Web server www.example.com. Even though the website is live on the web server, the problem is that the progre ...

Tips for resolving the React Hook Type Error issue

Error Image const isLoggedIn = true; const handleChangeEvent = () => {}; const [displayPassword, setDisplayPassword] = useState(false); const handleTogglePassword = () => setDisplayPassword((prevDisplayPassword) => !prevDi ...

Remove all $.ajax requests from content that has been loaded using $.ajax in jQuery

I'm currently working on a page where users can click a link to load content using $.ajax into a designated container div. However, I've encountered an issue with multiple clicks causing an increase in the number of $.ajax requests and resulting ...

What is the best method to determine the currency associated with the code in dinero.js?

Is there an easy way to locate the dinero currency in the dinero.js/currencies package using its code? For example, a function called getCurrency that accepts a string as input and outputs the corresponding dinero currency. ...

What steps can I take to help EventListener locate a specific class if it is experiencing difficulty?

In the process of creating a responsive navigation bar, everything seems to be functioning correctly except for a small javascript error that arises in my sub menu when clicking. Despite thoroughly checking through my index, script, and style files, I am ...

Creating Filled DIVs using JavaScript

Although it may appear to be a common inquiry, my specific needs have not been addressed in any of the Stack threads I've come across. I am dealing with a series of nested DIV statements, as demonstrated here (not all CSS included). I am looking to ...