How can we create reusable function in javascript and execute on different stages from the document?

[danyal1248]

There are some problems that I am facing while working on Amp.
1)If I change the state of any input field or DIV and need to perform any event action on this, is it possible?
2)How can I use one amp script on different places without impacting IDs?
Kindly answer this as soon as possible.

[kristoferbaxter]

@morsssss This appears to be a question related to building AMP documents, can you ensure we have coverage on AMP.dev these topics?

[morsssss]

Hello again @danyal1248 !

1. In an AMP document, normally the best way to perform an actions is to use AMP's actions and events system. You can also do a lot with amp-script, but if you're using AMP, you might as well use what's built into the framework if you can, instead of trying to create your own solution.

2. If you want to use multiple <amp-script> components on the same page, but use the same JavaScript for each, you could just access the JS from a remote URL, as described here in the documentation.

If you have more detailed questions, please try the other resources I mentioned in #32489 ! Normally we use github for tracking issues with the AMP project.

[danyal1248]

Hey morssss,
The problem is, I want to perform one action in amp script and then get the value of that action, after that using JavaScript I want to create some data with that value. These things are working fine but, the problem is that when the time comes to append that data on the other place in the document except that amp-script or if I use another amp-script with the same script id, so it is not working.
The scenario in my mind is:
Clink on my add to cart. (This button will be present on all over document on different places)
Get the value of the product.
Value send to server and get data from server.
On that script create one bottom sheet append all data there.(When I try to append on other div which is not present on same amp script or other amp script with same script id it is not working.)

Another thing is that, is it possible to call any js function using inHTML or call same script js function using action event.

[morsssss]

Again, I don't get exactly what you're facing here, but, to this:

I want to perform one action in amp script and then get the value of that action, after that using JavaScript I want to create some data with that value. These things are working fine but, the problem is that when the time comes to append that data on the other place in the document except that amp-script or if I use another amp-script with the same script id, so it is not working.

The usual way to get data from amp-script into the DOM would be:

• use amp-state to set up a state variable in the DOM
• calculate what you want to in amp-script
• use AMP.setState() to insert that value into the state variable
• bind something in the DOM to an expression that includes that state variable

That's about the best I can do here on github! If you have more questions, I urge you try StackOverflow / Slack as mentioned above.