1

I ran into such a problem, in my App, I have a variable that contains productId, Also I have a function which returns productId, I wonder if that is possible to pass productId function into addToCard() function as a parameter and return value, I am trying to get a similar result addToCard('223343445'), It is possible to achieve this result? Thanks

let singleProductId = '223343445'

productId(singleProductId)

function productId(parameter){
    return parameter
}


function addToCard(param){
  console.log(`${param} added to the card`)
}
<button onclick=addToCard(productId())>add to cart</button>
theUltimateKafka
  • 369
  • 2
  • 10
  • 1
    Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Once you’ve done this you can attach information to the button, e.g. with a custom [`data-*` attribute](/q/30417852/4642212) and read from the `dataset` of the button. – Sebastian Simon Apr 23 '21 at 10:06
  • 2
    Use [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple events — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](https://stackoverflow.com/tags/event-delegation/info) and [What is DOM Event delegation?](https://stackoverflow.com/q/1687296/4642212). – Sebastian Simon Apr 23 '21 at 10:06
  • You're not passing any parameters to `productId()` in your handler. – El_Vanja Apr 23 '21 at 10:08
  • 3
    It's not clear to me what you're asking. Your `productId` function accepts a parameter and returns that value, without doing anything. (Sometimes called an "identity function.") You're calling it with no parameter, so it returns `undefined`. What are you expecting instead? Note that the function doesn't *keep* any previous value, so your call to it near the top of the code doesn't do anything. – T.J. Crowder Apr 23 '21 at 10:08
  • Aside from the mechanics of the above, this sounds like [an X/Y problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). If you tell us what your overall goal is, there's probably a better way to achieve it. – T.J. Crowder Apr 23 '21 at 10:09
  • What OP want is to pass a function and retrieve the same result as passing the ID in `addToCard`. – decpk Apr 23 '21 at 10:15

2 Answers2

0

Just pass the function into addToCard and call it inside of it.

let singleProductId = "223343445";

function productId(parameter) {
  return parameter;
}

function addToCard(productId) {
  console.log(`${productId(singleProductId)} added to the card`);
}

const button = document.querySelector("button");
button.addEventListener("click", e => {
  addToCard(productId);
})
<button>add to cart</button>
decpk
  • 6,314
  • 1
  • 10
  • 24
0

please follow this approach

const singleProductId = '223343445';

const productId=(parameter)=>{
    return parameter
}
 const addToCard=(param)=>{
     param=productId(singleProductId) 
  console.log(`${param} added to the card`)
}

<button onclick=addToCard(productId())>add to cart</button>
Force Bolt
  • 273
  • 5