# How do I add javascript function on click event?
**URL:** https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364
**Category:** CMS
**Created:** [July 7, 2022, 11:05am UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364 "2022-07-07T11:05:03Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 7, 2022, 11:05am UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/1 "2022-07-07T11:05:03Z")
I added below function on click event. But wasnt getting expected results.
function scrollToTargetAdjusted() {
var element = document.getElementById(‘targetElement’);
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
```
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
```
}
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 7, 2022, 4:03pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/2 "2022-07-07T16:03:44Z")
Hi Bindiya!
You can achieve the scrollTo event in the [builder.io](http://builder.io) by simply adding custom code to `onClick` event of a button. You can find more at [Custom Code in the Builder Visual Editor](https://www.builder.io/c/docs/guides/custom-code).
You can also refer to the below code which worked for me. Thank you!
```auto
var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
```
---
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 8, 2022, 4:02am UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/3 "2022-07-08T04:02:06Z")
Hello Manish, I have added links as shown in [[Linking within pages in Builder.io - Builder.io](https://www.builder.io/c/docs/guides/hash-links)]. But want to add a offset to targeted id. could you help?
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 8, 2022, 12:35pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/4 "2022-07-08T12:35:45Z")
Hi @Bindiya,
If you want to add an offset for scroll to the target element, I recommend binding the element with an onClick event to the links instead and adding the below lines of code to the event custom code section
```auto
var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
```
---
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 8, 2022, 1:11pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/5 "2022-07-08T13:11:51Z")
I have added below code for alphabet a onclick event.
var element = document.getElementById(‘section-a’);
var headerOffset = 80;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: ‘smooth’
});
Can be checked on click alphabet a from horizontal alphabet list.
[https://qa.olivela.com/page/designer-directory-url-2](https://qa.olivela.com/page/designer-directory-url-2)
Offset is not getting set.
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 8, 2022, 1:30pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/6 "2022-07-08T13:30:43Z")
Hi @Bindiya,
The [link](https://qa.olivela.com/page/designer-directory-url-2) seems to be working for me.
Can you try `console.log(offsetPosition)` and check if there is an error on the js console?
---
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 8, 2022, 2:31pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/7 "2022-07-08T14:31:32Z")
Getting this error
\_app-5dd6b45621fe87a7.js:1 Builder custom code error: Cannot read properties of null (reading ‘getBoundingClientRect’) in var element=document.getElementById(“targetElement”),headerOffset=75,elementPosition=element.getBoundingClientRect().top,offsetPosition=elementPosition+window.pageYOffset-headerOffset;window.scrollTo({top:offsetPosition,behavior:“smooth”}) TypeError: Cannot read properties of null (reading ‘getBoundingClientRect’)
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 8, 2022, 2:45pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/8 "2022-07-08T14:45:20Z")
Hi @Bindiya,
I don’t see any id with `targetElement` on your page. Can you try the below code
`var element=document.getElementById("section-z")`
instead of
`var element=document.getElementById(“targetElement”)`.
If you still have any issues then kindly share your builder editor content URL. Thank you!
---
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 8, 2022, 2:57pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/9 "2022-07-08T14:57:29Z")
I have added id “section-a”
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 8, 2022, 3:10pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/10 "2022-07-08T15:10:09Z")
Will you be able to share your builder content link?
---
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 8, 2022, 3:12pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/11 "2022-07-08T15:12:49Z")
I appreciate your patience in dealing with this issue.
[https://builder.io/content/135709f9ab83478487c9f70a4286e272/edit?activeDesignerTab=5&selectedBlock=builder-f6b86c8d22534e54835ab8431204ef4b](https://builder.io/content/135709f9ab83478487c9f70a4286e272/edit?activeDesignerTab=5&selectedBlock=builder-f6b86c8d22534e54835ab8431204ef4b), here is the url I’m working on.
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 8, 2022, 3:14pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/12 "2022-07-08T15:14:56Z")
Sorry, you are working on localhost so that content is not accessible.
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 8, 2022, 3:16pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/13 "2022-07-08T15:16:09Z")
Can you share screenshots of the code and the HTML id attribute?
---
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 8, 2022, 4:05pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/14 "2022-07-08T16:05:07Z")
[https://builder.io/content/135709f9ab83478487c9f70a4286e272/edit?activeDesignerTab=5&selectedBlock=builder-f6b86c8d22534e54835ab8431204ef4b](https://builder.io/content/135709f9ab83478487c9f70a4286e272/edit?activeDesignerTab=5&selectedBlock=builder-f6b86c8d22534e54835ab8431204ef4b)
Is this link accessible?
Also I have attached screenshots for reference.
And getting below error is console:
react\_devtools\_backend.js:4026 Builder custom code error: Cannot read properties of null (reading ‘getBoundingClientRect’) in var element=document.getElementById(“targetElement”),headerOffset=75,elementPosition=element.getBoundingClientRect().top,offsetPosition=elementPosition+window.pageYOffset-headerOffset;window.scrollTo({top:offsetPosition,behavior:“smooth”}) TypeError: Cannot read properties of null (reading ‘getBoundingClientRect’)
at eval (eval at stringToFunction ([https://qa.olivela.com/\_next/static/chunks/pages/\_app-5dd6b45621fe87a7.js:1:42062](https://qa.olivela.com/_next/static/chunks/pages/_app-5dd6b45621fe87a7.js:1:42062)), :31:106)
at c ([https://qa.olivela.com/\_next/static/chunks/pages/\_app-5dd6b45621fe87a7.js:1:43336](https://qa.olivela.com/_next/static/chunks/pages/_app-5dd6b45621fe87a7.js:1:43336))
at v. ([https://qa.olivela.com/\_next/static/chunks/pages/\_app-5dd6b45621fe87a7.js:1:52090](https://qa.olivela.com/_next/static/chunks/pages/_app-5dd6b45621fe87a7.js:1:52090))
at Object.Oe ([https://qa.olivela.com/\_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:16874](https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:16874))
at Ae ([https://qa.olivela.com/\_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:17028](https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:17028))
at [https://qa.olivela.com/\_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:36850](https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:36850)
at Or ([https://qa.olivela.com/\_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:36944](https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:36944))
at Dr ([https://qa.olivela.com/\_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:37359](https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:37359))
at [https://qa.olivela.com/\_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:42801](https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:42801)
at Zi ([https://qa.olivela.com/\_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:104131](https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:104131))
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 8, 2022, 4:33pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/15 "2022-07-08T16:33:39Z")
Hi @Bindiya,
Could you please remove the Link URL and then try since there is an onClick event which will do the scroll to the section we don’t need the Link URL.
---
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 8, 2022, 4:42pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/16 "2022-07-08T16:42:55Z")
Without link function doesnt work
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [July 8, 2022, 4:53pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/17 "2022-07-08T16:53:06Z")
Hi @Bindiya,
I’ve got your ‘C’ working, can you check once?
---
### Author:  [@Bindiya](https://forum.builder.io/u/Bindiya)
#### Post date: [July 8, 2022, 5:17pm UTC](https://forum.builder.io/t/how-do-i-add-javascript-function-on-click-event/2364/18 "2022-07-08T17:17:52Z")
Thanks Manish, it’s working as expected