# addEventListener is not a function?

**URL:** <https://community.hubspot.com/t/addeventlistener-is-not-a-function/79229>\
**Category:** CMS Development\
**Tags:** javascript\
**Created:** [April 13, 2023, 12:06am UTC](https://community.hubspot.com/t/addeventlistener-is-not-a-function/79229 "2023-04-13T00:06:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SRalston05](https://avatars.discourse-cdn.com/v4/letter/s/8e8cbc/32.png) [@SRalston05](https://community.hubspot.com/u/SRalston05)\
**Post date:** [April 13, 2023, 12:06am UTC](https://community.hubspot.com/t/addeventlistener-is-not-a-function/79229/1 "2023-04-13T00:06:51Z")

</div>

I have this code:  
window.addEventListener(‘message’, event =\> {  
if(event.data.type === ‘hsFormCallback’ && event.data.eventName === ‘onFormReady’) {  
let sourceField = document.getElementsByName(“city”);  
sourceField.addEventListener(“change”, myFunction);  
function myFunction() {  
console.log(" ~~~~ changing");  
}  
}  
}

When I load the form I get this error in Chrome DevTools Console - Uncaught TypeError: sourceField.addEventListener is not a function

Ultimately, I want to add the value entered in the City field into a hidden form field. Any thoughts on what I’m doing wrong here? Or a better way to do what I’m trying to do?

Thanks.

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [April 13, 2023, 1:11am UTC](https://community.hubspot.com/t/addeventlistener-is-not-a-function/79229/2 "2023-04-13T01:11:00Z")

</div>

You’re using document.getElementsByName, “elements” plural. so you need to specify that it’s the first element you’re watching for a change:

` sourceField[0].addEventListener("change", myFunction);`

I’ve tested it and it’ll work if you make this change.

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![SRalston05](https://avatars.discourse-cdn.com/v4/letter/s/8e8cbc/32.png) [@SRalston05](https://community.hubspot.com/u/SRalston05)\
**Post date:** [April 17, 2023, 3:00pm UTC](https://community.hubspot.com/t/addeventlistener-is-not-a-function/79229/3 "2023-04-17T15:00:48Z")

</div>

Thank you! This got me the rest of the way through this project.

---

<div class="post-metadata">

**Author:** ![skimura](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@skimura](https://community.hubspot.com/u/skimura)\
**Post date:** [April 13, 2023, 1:38am UTC](https://community.hubspot.com/t/addeventlistener-is-not-a-function/79229/4 "2023-04-13T01:38:52Z")

</div>

@SRalston05

Hi.

If you’re using an embedded form, the form element is contained within an iframe.

In this case, how about this?

```lia-code-sample
 hbspt.forms.create({
 region: "...",
 portalId: "...",
 formId: "...",
 onFormReady: function($form) {
 const sourceField = $form.querySelector('[name="city"]');
 sourceField.addEventListener("change", myFunction);

 function myFunction() {
 console.log(" ~~~~ changeing");
 }
 }
 });

```

Thanks.

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [April 20, 2023, 12:11pm UTC](https://community.hubspot.com/t/addeventlistener-is-not-a-function/79229/5 "2023-04-20T12:11:27Z")

</div>

Hi @SRalston05

The error message is indicating that `sourceField` is not a valid DOM element and therefore does not have an `addEventListener` function. The `getElementsByName` function returns a collection of elements, even if there is only one element with the specified name. Therefore, you need to access the first element of the collection to attach the event listener.

Here is the corrected code:

```javascript  
window.addEventListener(‘message’, event =\> {  
if(event.data.type === ‘hsFormCallback’ && event.data.eventName === ‘onFormReady’) {  
let sourceField = document.getElementsByName(“city”)[0];  
sourceField.addEventListener(“change”, myFunction);

function myFunction() {  
let cityFieldValue = sourceField.value;  
let hiddenField = document.getElementsByName(“hidden\_city\_field”)[0];  
hiddenField.value = cityFieldValue;  
}  
}  
});  
```

In this code, `sourceField` is accessed using `[0]` to get the first element of the collection. The `myFunction` function is modified to retrieve the value of the `city` field and set the value of the hidden field named `hidden_city_field`.

Make sure to replace `hidden_city_field` with the name of the actual hidden field you want to set the value of.

Note that the `change` event is fired when the user changes the value of the field and moves focus away from the field, such as by clicking outside of the field or pressing the Tab key. If you want to update the hidden field in real-time as the user types, you can use the `input` event instead of the `change` event.

Please mark it as SOLUTION ACCEPTED if you like the solution.

Thank you!